@spectrum-web-components/tab-list
v0.3.11
Published
The `<sp-tab-list>` component contains set of tab-item elements. This is typically used as the interface for controlling a set of layered sections of content that display one panel of content at a time
Downloads
93
Readme
Description
The <sp-tab-list>
component contains set of tab-item elements. This is typically used as the interface for controlling a set of layered sections of content that display one panel of content at a time
Installation
npm install @spectrum-web-components/tab-list
# or
yarn add @spectrum-web-components/tab-list
Example
<sp-tab-list selected="1">
<sp-tab label="Tab 1" value="1" tabindex="1"></sp-tab>
<sp-tab label="Tab 2" value="2" tabindex="2"></sp-tab>
<sp-tab label="Tab 3" value="3" tabindex="3"></sp-tab>
<sp-tab label="Tab 4" value="4" tabindex="4"></sp-tab>
</sp-tab-list>
Vertical
<sp-tab-list selected="1" direction="vertical">
<sp-tab label="Tab 1" value="1" tabindex="1"></sp-tab>
<sp-tab label="Tab 2" value="2" tabindex="2"></sp-tab>
<sp-tab label="Tab 3" value="3" tabindex="3"></sp-tab>
<sp-tab label="Tab 4" value="4" tabindex="4"></sp-tab>
</sp-tab-list>
Variants
Quiet
<sp-tab-list selected="1" quiet>
<sp-tab label="Tab 1" value="1" tabindex="1"></sp-tab>
<sp-tab label="Tab 2" value="2" tabindex="2"></sp-tab>
<sp-tab label="Tab 3" value="3" tabindex="3"></sp-tab>
<sp-tab label="Tab 4" value="4" tabindex="4"></sp-tab>
</sp-tab-list>
Compact
<sp-tab-list selected="1" compact>
<sp-tab label="Tab 1" value="1" tabindex="1"></sp-tab>
<sp-tab label="Tab 2" value="2" tabindex="2"></sp-tab>
<sp-tab label="Tab 3" value="3" tabindex="3"></sp-tab>
<sp-tab label="Tab 4" value="4" tabindex="4"></sp-tab>
</sp-tab-list>
With icons
<div>
<sp-icons-medium></sp-icons-medium>
<sp-tab-list selected="1" direction="horizontal">
<sp-tab label="Tab 1" value="1" tabindex="1">
<sp-icon slot="icon" size="s" name="ui:CheckmarkSmall"></sp-icon>
</sp-tab>
<sp-tab label="Tab 2" value="2" tabindex="2">
<sp-icon slot="icon" size="s" name="ui:CrossSmall"></sp-icon>
</sp-tab>
<sp-tab label="Tab 3" value="3" tabindex="3">
<sp-icon slot="icon" size="s" name="ui:ChevronDownSmall"></sp-icon>
</sp-tab>
<sp-tab label="Tab 4" value="4" tabindex="4">
<sp-icon slot="icon" size="s" name="ui:HelpSmall"></sp-icon>
</sp-tab>
</sp-tab-list>
</div>
Accessibility
When an <sp-tab-list>
has a selected
value, the <sp-tab>
child of that value
will be given [tabindex="0"]
and will receive initial focus when tabbing into the <sp-tab-list>
element. When no selected
value is present, the first <sp-tab>
child will be treated in this way. When focus is currently within the <sp-tab-list>
element, the left and right arrows will move that focus back and forth through the available <sp-tab>
children.