API Documentation
Tabs ⇐ ElementBase
A set of pages with a tab strip governing which page is shown.
This stock combination puts together a basic-tab-strip and a basic-modes element. If you'd like to create something more complex than this arrangement, you can use either of those elements on its own.
Since this component uses basic-tab-strip internally, it obtains the names of
the individual tabs the same way: from a child's aria-label property.
Example:
<basic-tabs>
<div aria-label="One">Page one</div>
<div aria-label="Two">Page two</div>
<div aria-label="Three">Page three</div>
</basic-tabs>
Kind: global class
Extends: ElementBase
Mixes: ItemsSelection
, TargetSelection
- Tabs ⇐
ElementBase- .applySelection(item, selected)
- .canSelectNext :
boolean - .canSelectPrevious :
boolean - .itemAdded(item)
- .items :
Array.<HTMLElement> - .itemsChanged()
- "selected-index-changed"
- "selected-item-changed"
- .selectedIndex :
number - .selectedItem :
object - .selectedItem :
HTMLElement - .selectFirst()
- .selectionRequired :
boolean - .selectionWraps :
boolean - .selectionWraps :
boolean - .selectLast()
- .selectNext()
- .selectPrevious()
- .tabPosition :
string - .target :
HTMLElement
tabs.applySelection(item, selected)
Apply the indicate selection state to the item.
The default implementation of this method does nothing. User-visible effects will typically be handled by other mixins.
Kind: instance method of Tabs. Defined by ItemsSelection mixin.
| Param | Type | Description |
|---|---|---|
| item | HTMLElement |
the item being selected/deselected |
| selected | boolean |
true if the item is selected, false if not |
tabs.canSelectNext : boolean
True if the selection can be moved to the next item, false if not (the selected item is the last item in the list).
Kind: instance property of Tabs. Defined by ItemsSelection mixin.
tabs.canSelectPrevious : boolean
True if the selection can be moved to the previous item, false if not (the selected item is the first one in the list).
Kind: instance property of Tabs. Defined by ItemsSelection mixin.
tabs.itemAdded(item)
Handle a new item being added to the list.
The default implementation of this method simply sets the item's selection state to false.
Kind: instance method of Tabs. Defined by ItemsSelection mixin.
| Param | Type | Description |
|---|---|---|
| item | HTMLElement |
the item being added |
tabs.items : Array.<HTMLElement>
The current set of items in the list.
Kind: instance property of Tabs. Defined by TargetSelection mixin.
tabs.itemsChanged()
This method is invoked when the underlying contents change. It is also invoked on component initialization – since the items have "changed" from being nothing.
Kind: instance method of Tabs. Defined by TargetSelection mixin.
"selected-index-changed"
Fires when the selectedIndex property changes.
Kind: event emitted by Tabs. Defined by ItemsSelection mixin.
| Param | Type | Description |
|---|---|---|
| detail.selectedIndex | number |
The new selected index. |
"selected-item-changed"
Fires when the selectedItem property changes.
Kind: event emitted by Tabs. Defined by ItemsSelection mixin.
| Param | Type | Description |
|---|---|---|
| detail.selectedItem | HTMLElement |
The new selected item. |
| detail.previousItem | HTMLElement |
The previously selected item. |
tabs.selectedIndex : number
The index of the item which is currently selected.
If selectionWraps is false, the index is -1 if there is no selection.
In that case, setting the index to -1 will deselect any
currently-selected item.
Kind: instance property of Tabs. Defined by ItemsSelection mixin.
tabs.selectedItem : object
The currently selected item, or null if there is no selection.
Setting this property to null deselects any currently-selected item.
Kind: instance property of Tabs. Defined by ItemsSelection mixin.
tabs.selectedItem : HTMLElement
The currently selected item, or null if there is no selection.
Kind: instance property of Tabs. Defined by TargetSelection mixin.
tabs.selectFirst()
Select the first item in the list.
Kind: instance method of Tabs. Defined by ItemsSelection mixin.
tabs.selectionRequired : boolean
True if the list should always have a selection (if it has items).
Kind: instance property of Tabs. Defined by ItemsSelection mixin.
Default: false
tabs.selectionWraps : boolean
True if selection navigations wrap from last to first, and vice versa.
Kind: instance property of Tabs. Defined by TargetSelection mixin.
Default: {false}
tabs.selectionWraps : boolean
True if selection navigations wrap from last to first, and vice versa.
Kind: instance property of Tabs. Defined by ItemsSelection mixin.
Default: false
tabs.selectLast()
Select the last item in the list.
Kind: instance method of Tabs. Defined by ItemsSelection mixin.
tabs.selectNext()
Select the next item in the list.
Kind: instance method of Tabs. Defined by ItemsSelection mixin.
tabs.selectPrevious()
Select the previous item in the list.
Kind: instance method of Tabs. Defined by ItemsSelection mixin.
tabs.tabPosition : string
The position of the tab strip relative to the element's children. Valid values are "top", "left", "right", and "bottom".
Kind: instance property of Tabs
Default: ""top""
tabs.target : HTMLElement
Gets/sets the target element to which this component will delegate selection actions.
Kind: instance property of Tabs. Defined by TargetSelection mixin.