ember-responsive-tabs
Full-width responsive tab component using Ember.
Last updated 3 months ago by rajasegar .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ember-responsive-tabs 
SYNC missed versions from official npm registry.

ember-responsive-tabs

Build Status npm npm version EmberObserver

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

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

Current Tags

  • 1.0.7                                ...           latest (3 months ago)

13 Versions

  • 1.0.7                                ...           3 months ago
  • 1.0.6                                ...           7 months ago
  • 1.0.5                                ...           a year ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 0.0.10                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |