Tabs

lx-tabs is a directive that create a navigation system with tabs.

This component has been completly reworked since LumX beta version (v0.3.96).
Please refer to the updated documentation.

One lx-tab directive per tab need to be transcluded.
lx-tab directive has a label or an icon as parameter and pane content as transcluded element.
Main colors defined in dist/scss/core/settings/defaults.scss can be used to create colored tabs.
If theme is light, color will be applied to tabs label / icon and indicator. If theme is dark, color will be applied to tabs background and tabs label / icon will be white.
ng-repeat directive can be used to loop threw an array of tabs. Tabs and panes can be separated with two directives: lx-tabs for tabs and lx-tabs-panes for panes.
It's usefull when you need to scroll into panes with fixed tabs.
Parameter Type Default Description
lx-layout string full Define the tabs layout. Options: full (tabs will share the available width), inline (tabs will be aligned to the left)
lx-theme string light Define the tabs theme. Options: light (color will be applied to tabs label and indicator), dark (color will be applied to tabs background and tabs label / icon will be white)
lx-color string primary Define the tabs color according to the theme attribute. Options: colors defined in colors and sizes section in dist/scss/core/settings/defaults.scss
lx-indicator string accent Define the indicator color when theme is set to dark. Options: colors defined in colors and sizes section in dist/scss/core/settings/defaults.scss
lx-active-tab integer Define the active tab index.
lx-panes-id string Target the right lx-tabs-panes id in seaparate mode.
links object Define the tabs links in seaparate mode.