import {TabList} from '@adobe/coral-spectrum'

public class | source

TabList

Expression Extends:

class TabList extends BaseComponent(HTMLElement)

Mixin Extends:

HTMLElement, BaseComponent

A TabList component holds a collection of tabs.

See:

../examples/#tablist

Example:

Markup

<coral-tablist></coral-tablist>

JS constructor

new Coral.TabList();

Static Member Summary

Static Public Members
public static	orientation: TabListOrientationEnum: * Returns TabList orientation options.
public static	size: TabListSizeEnum: * Returns TabList sizes.

Member Summary

Public Members
public	items: SelectableCollection The Collection Interface that allows interacting with the items that the component contains.
public	orientation: String Orientation of the TabList.
public	selectedItem: HTMLElement The selected item in the TabList.
public	size: String The size of the TabList.
public	target: HTMLElement \| String The target component that will be linked to the TabList.

Static Public Members

public static orientation: TabListOrientationEnum: * source

Returns TabList orientation options.

Return:

TabListOrientationEnum

public static size: TabListSizeEnum: * source

Returns TabList sizes.

Return:

TabListSizeEnum

Public Members

public items: SelectableCollection source

The Collection Interface that allows interacting with the items that the component contains.

read-only

public orientation: String source

Orientation of the TabList. See TabListOrientationEnum.

TabListOrientationEnum.HORIZONTAL by default.
reflected

public selectedItem: HTMLElement source

The selected item in the TabList.

read-only

public size: String source

The size of the TabList. It accepts both lower and upper case sizes. Currently only "M" (the default) and "L" are available. See TabListSizeEnum.

TabListSizeEnum.MEDIUM by default.
reflected

public target: HTMLElement | String source

The target component that will be linked to the TabList. It accepts either a CSS selector or a DOM element. If a CSS Selector is provided, the first matching element will be used. Items will be selected based on the index. If both target and Coral.Tab#target are set, the second will have higher priority.

null by default.