ember-paper-tabs

This is an ember-paper addon that provides an implementation of material tabs.

Usage

An exemple usage:

  {{#paper-tabs as |tabs|}}
    {{#tabs.tab label="Tab 1"}}
      Content 1
    {{/tabs.tab}}
    {{#tabs.tab as |tab|}}
      {{#tab.label}}
        Tab 1      
      {{/tab.label}}
      
      {{#tab.body}}
        Content 2
      {{/tab.body}}
    {{/tabs.tab}}
  {{/paper-tabs}}

Demo

You can see how this addon looks like at https://cogniteev.github.io/ember-paper-tabs/

Installation

ember install ember-paper-tabs

Don't forget to import your styles in your app.scss after importing ember paper styles:

@import "ember-paper";
@import "ember-paper-tabs";

API

{{#paper-tabs as |tabs|}}

• dynamicHeight - defaults to false - sets the paper-tabs height to the active tab's height.
• alignTabs - defaults to top - sets tabs position, values are top | bottom.
• borderBottom - defaults to false - displays a border underneath the tabs.
• noInk - defaults to false - disables ripple effects upon click.
• noInkBar - defaults to false - displays a bar underneath active tabs.
• centerTabs - defaults to false - tabs takes all the width.
• stretchTabs - defaults to auto - values are always | never | auto.
• autoSelect - defaults to false - automatically open newly added tab.

{{#paper-tab as |tab|}}

• disabled - defaults to false.
• onSelect - a function called when tab is selected.
• onDeselect - a function called when tab is deselected.

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/.