sp-tab
Attributes and Properties #
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
dir | dir | 'ltr' | 'rtl' | 'ltr' | |
disabled | disabled | boolean | false | |
label | label | string | '' | |
selected | selected | boolean | false | |
value | value | string | '' | |
vertical | vertical | boolean | false |
Slots #
Name | Description |
---|---|
default slot | text label of the Tab |
icon | The icon that appears on the left of the label |
Events #
Name | Type | Description |
---|---|---|
sp-tab-contentchange | Event | When the content in a tab has changed, JS powered layout related to that content may also need to be changed. |
Description #
An <sp-tab>
element surfaces a label
attribute to serve as its default text content when none is available in the DOM. An icon may be assigned to the element via the icon
slot; e.g. <sp-tab><svg slot="icon" aria-label="Tab w/ Icon">...</svg></sp-tab>
. Associate an <sp-tab>
element with the <sp-tab-panel>
that represents its content with the value
attribute.
Usage #
yarn add @spectrum-web-components/tabs
Import the side effectful registration of <sp-tab>
via:
import '@spectrum-web-components/tabs/sp-tab.js';
When looking to leverage the Tab
base class as a type and/or for extension purposes, do so via:
import { Tab, } from '@spectrum-web-components/tabs';
Examples #
<sp-tabs selected="1">
<sp-tab label="Tab 1" value="1"></sp-tab>
<sp-tab value="2">Tab 2</sp-tab>
<sp-tab label="Tab 3" value="3">
<sp-icon-checkmark slot="icon"></sp-icon-checkmark>
</sp-tab>
<sp-tab vertical value="4">
Tab 4
<sp-icon-checkmark slot="icon"></sp-icon-checkmark>
</sp-tab>
<sp-tab-panel value="1">
Content for Tab 1 which uses an attribute for its content delivery
</sp-tab-panel>
<sp-tab-panel value="2">
Content for Tab 2 which uses its text content directly
</sp-tab-panel>
<sp-tab-panel value="3">
Content for Tab 3 which uses an attribute with a
<code>[slot="icon"]</code>
child
</sp-tab-panel>
<sp-tab-panel value="4">
Content for Tab 4 which uses both its text content and a
<code>[slot="icon"]</code>
child displayed using the
<code>[vertical]</code>
attribute to define their alignment
</sp-tab-panel>
</sp-tabs>
<sp-tabs selected="1" direction="vertical">
<sp-tab label="Tab 1" value="1"></sp-tab>
<sp-tab value="2">Tab 2</sp-tab>
<sp-tab label="Tab 3" value="3">
<sp-icon-checkmark slot="icon"></sp-icon-checkmark>
</sp-tab>
<sp-tab vertical value="4">
Tab 4
<sp-icon-checkmark slot="icon"></sp-icon-checkmark>
</sp-tab>
<sp-tab-panel value="1">
Content for Tab 1 which uses an attribute for its content delivery
</sp-tab-panel>
<sp-tab-panel value="2">
Content for Tab 2 which uses its text content directly
</sp-tab-panel>
<sp-tab-panel value="3">
Content for Tab 3 which uses an attribute with a
<code>[slot="icon"]</code>
child
</sp-tab-panel>
<sp-tab-panel value="4">
Content for Tab 4 which uses both its text content and a
<code>[slot="icon"]</code>
child displayed using the
<code>[vertical]</code>
attribute to define their alignment
</sp-tab-panel>
</sp-tabs>
Disabled #
When an <sp-tab>
element is given the disabled
attribute it will prevent visitor from selecting that tab and its contents. The ability to select other tabs and their content will go unimpeaded.
<sp-tabs selected="2">
<sp-tab label="Tab 1" value="1"></sp-tab>
<sp-tab label="Tab 2" value="2"></sp-tab>
<sp-tab label="Tab 3" value="3" disabled></sp-tab>
<sp-tab label="Tab 4" value="4"></sp-tab>
<sp-tab-panel value="1">Content for Tab 1 is selectable</sp-tab-panel>
<sp-tab-panel value="2">Content for Tab 2 is selected</sp-tab-panel>
<sp-tab-panel value="3">Content for Tab 3 is not selectable</sp-tab-panel>
<sp-tab-panel value="4">Content for Tab 4 is selectable</sp-tab-panel>
</sp-tabs>