sjmaceyful / ember-responsive-tabs

Full width responsive tab component as an ember addon

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

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:

:root {
    --tab-primary: #47a3da;  /* Active Color */
    --tab-secondary: #becbd2; /* Normal Color and Border */
    --tab-hover: #768e9d; /* Hover Color */
}

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember 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