sp-tab

Examples API

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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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>