ember-x-tabs

!Build and Deploy

An Ember addon for Tab component with various style options and theme customization.

Heavily inspired by this Codrops article

Demo

Demo

Installation

* ember install ember-x-tabs

Features

* Declarative
* 14+ Styles to choose from
* Fully composable
* Customizable

Usage

Example markup:

$3

A fully contextual version of the tab component is provided under the name x-tabs

``hbs


{{!-- tab content --}}



Home



Archive



Analytics



Settings



Upload



{{!-- tab content --}}




Home

This is home content

Archive

This is archive content

Analytics

This is analytics content

Settings

This is settings content

Upload

This is upload content


`

x-tabs can also be used as a page-control, that is a control that has several tabs each with an
associated data object. There is only one dataPane and as the tabs are selected, the tabs data is
yielded to the dataPane

`





Home



Archive



Analytics



Settings



Upload





Page Control

Data: {{pane.data.name}}


`

Tab styles

You can replace the tab-style property of the component to any of the following styles to get
a different style variation of your tab component.

* tabs-style-bar (Default)
* tabs-style-iconbox
* tabs-style-underline
* tabs-style-linetriangle
* tabs-style-topline
* tabs-style-iconfall
* tabs-style-linemove
* tabs-style-line
* tabs-style-circle
* tabs-style-shape
* tabs-style-linebox
* tabs-style-flip
* tabs-style-circlefill
* tabs-style-tzoid
* tabs-style-fillup

Customization - Theming

This tab component can be themed using CSS variables to suit the color of your choice.

Kindly override these variables in your css file.

For example:

` css
:root {
--x-tab-active: #2CC185;

--x-tab-color1: #334455;
--x-tab-color2: #74777b;
--x-tab-color3: #4a4a4b;
--x-tab-color4: #000;

/ Background colors /
--x-tab-bg1: #f7f7f7;
--x-tab-bg2: #f0f0f0;
--x-tab-bg3: #fff;
--x-tab-bg4: #bdc2c9;
}
`

$3


Use the customClass option to add your own custom classnames.
`hbs
{{#x-tab customClass="myTabClass" as |tab|}}
`

Write your own definition for the classnames
`css
.myTabClass nav {
background: lightblue;
}
.myTabClass nav ul a {
color: lightblue;
}
.myTabClass nav ul a:hover {
color: steelblue;
}
.myTabClass nav ul li.tab-current {
background: steelblue;
}
.myTabClass nav ul li {
background: white;
margin: 4px 2px;
}

.myTabClass nav ul li.tab-current a {
color: white;
}
`




Configuring

Add a configuration for ember-x-tabs to include only the themes that you will use.

`
ENV['ember-x-tabs'] = {
includedThemes: ['bar', 'circle', 'flip'],
excludedThemes: ['iconbox'],
excludeBaseStyles: false, // defaults to false
defaultTheme: 'bar', // defaults to 'bar'
};
`

To exclude or not include a theme, means that it's css styles will not be bundled with your application, thus not polluting your app.

Note: including a blank array e.g. includeThemes: [] will not include any themes, leaving you to define your own theme styles. See the vendor/ember-x-tabs/themes directory for reference.

Note: you may also want to set excludeBaseStyles: true so that this addon doesn't include the styles used by all the themes.


A big Thanks to Ilya Radchenko for making this configuration possible to have a small memory footprint of css in your app when you are using the addon.

Running

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

Running Tests

* npm test
* ember test
* ember test --server

Building

* ember build`

For more information on using ember-cli, visit https://ember-cli.com/.