est

ember-sliding-tab-bar

An Ember-CLI sliding tab bar component addon

Showing:

Popularity

Downloads/wk

2

GitHub Stars

1

Maintenance

Last Commit

6yrs ago

Contributors

2

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Ember-sliding-tab-bar

Ember Observer Score

ember-sliding-tab-bar shows the active tab by using a sliding bottom border which reacts to clicks and route changes.

It uses the MutationObserver DOM API to watch for the active class on it's child tabs and moves a sliding 'highlight tab' to that location. When MutationObservers are not available (mainly IE10 and below) it falls back to plain CSS.

sliding tab-bar example

Installation

$ npm install --save-dev ember-sliding-tab-bar

Usage

{{#sliding-tab-bar}}
  <li>{{#link-to '1'}}Route 1{{/link-to}}</li>
  <li>{{#link-to '2'}}Route 2{{/link-to}}</li>
  {{!-- ... --}}
{{/sliding-tab-bar}}

Configuration Styles

The tab highlight size/color is the thing you'll most likely want to change. To do so, add the following to your CSS:

.sliding-tab-bar li.tab-highlight {
  border-bottom: solid ${height of highlight}px ${highlight color};
}

If you need to overwrite anything else just checkout vendor/sliding-tab-bar.css as the styles are fairly basic.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial