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.
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.
dist/scss/core/settings/defaults.scss
can be used to create colored tabs.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.
lx-tabs
for tabs and lx-tabs-panes
for panes.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. |