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: "&quot;top&quot;"

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.