var app = angular.module("myApp", ["lightTabs"]);
<light-tabs>
<light-tabs-pane light-tabs-title="TAB 1 TITLE">
</light-tabs-pane>
</light-tabs>
| Option | Description | Type | Default value |
|---|---|---|---|
| selected-pane-index | Scope-binded value: this will contain the current tab index: if you change this value from your controller, the directive will select the new tab if not disabled. | Number | null |
| visible-items-desktop | Number of elements to display on desktop (width > 992px) | Number | 3 |
| visible-items-tablet | Number of elements to display on tablet (768px <= width >= 992px) | Number | 3 |
| visible-items-mobile | Number of elements to display on mobile (width < 768px) | Number | 1 |
| show-indicators | If "true" one dot per tab will be showed over the tabs. | String | false |
| force-visible | By default, light-tabs will control if visible items is higher than the number of tabs. if force-visible is "true", the control will be skipped and you could achieve to display tabs as they are in the second demo below. | Boolean | true |
| Option | Description | Type | Default value |
|---|---|---|---|
| light-tabs-title | Optional title: this will be put in the tab toggle | string | empty |
| pane-disabled | Optional scope-binded value: this will set the tab active or disabled | boleean | false |
TAB 1 CONTENT
TAB 2 CONTENT
TAB 3 CONTENT
TAB 4 CONTENT
TAB 5 CONTENT
TAB 1 CONTENT
TAB 2 CONTENT
TAB 1 CONTENT
TAB 2 CONTENT
TAB 3 CONTENT
TAB 4 CONTENT
TAB 5 CONTENT
TAB 6 CONTENT
TAB 7 CONTENT
TAB 8 CONTENT
TAB 9 CONTENT
TAB 10 CONTENT
TAB 11 CONTENT
lightTabs is a widget to easily add a Tabs Widget in your website!