ember-responsive-tabs
Responsive full-width tab component with customizable theme options. Icons are provisioned by Font-awesome you need to add font-awesome to your project.
Kindly refer to the dummy app in tests.
Heavily inspired by this Codrops article
Demo
Installation
ember install ember-responsive-tabs
Usage
Example markup:
{{#fullwidth-tabs as |tab|}} {{#tab.pane title="Home" icon="fa fa-home"}} <h1>Home</h1> <p>Content for home tab goes here</p> {{/tab.pane}} {{#tab.pane title="Profile" icon="fa fa-profile"}} <h1>Profile</h1> <p>Content for profile tab goes here</p> {{/tab.pane}} {{#tab.pane title="Settings" icon="fa fa-settings"}} <h1>Home</h1> <p>Content for settings tab goes here</p> {{/tab.pane}} {{#tab.pane title="Message" icon="fa fa-message"}} <h1>Home</h1> <p>Content for message tab goes here</p> {{/tab.pane}} {{/fullwidth-tabs}}
Customization - Theming
This tab component can be themed using CSS variables to suit the color of your choice. Kindly override these variable values in your css file.
For example:
Running
ember serve
- Visit your app at http://localhost:4200.
Running Tests
npm test
(Runsember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit https://ember-cli.com/. Full width responsive tab component as an ember addon