Full-width responsive tab component using Ember.
npm install 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
* ember install ember-responsive-tabs
Example markup:
``hbs
{{#fullwidth-tabs as |tab|}}
{{#tab.pane title="Home" icon="fa fa-home"}}
Content for home tab goes here
{{#tab.pane title="Profile" icon="fa fa-profile"}}
Content for profile tab goes here
{{#tab.pane title="Settings" icon="fa fa-settings"}}
Content for settings tab goes here
{{#tab.pane title="Message" icon="fa fa-message"}}
Content for message tab goes here
{{/fullwidth-tabs}}
`
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:
`css`
:root {
--tab-primary: #47a3da; / Active Color /
--tab-secondary: #becbd2; / Normal Color and Border /
--tab-hover: #768e9d; / Hover Color /
}
* ember serve
* Visit your app at http://localhost:4200.
* npm test (Runs ember try:each to test your addon against multiple Ember versions)ember test
*
*
* ember build`
For more information on using ember-cli, visit https://ember-cli.com/.
Full width responsive tab component as an ember addon