sp-tab

NPM

1.0.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API

Attributes and Properties #

Property Attribute Type Default Description 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

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>