sp-tabs

NPM 1.4.0

View Storybook

Try it on webcomponents.dev
Overview API Changelog

Description

The <sp-tabs> displays a list of <sp-tab> element children as role="tablist". An <sp-tab> element is associated with a sibling <sp-tab-panel> element via their value attribute. When an <sp-tab> element is selected, the associated <sp-tab-panel> will also be selected, showing that panel and hiding the others.

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-tabs>, <sp-tab> or <sp-tab-panel> via:

import '@spectrum-web-components/tabs/sp-tabs.js';
import '@spectrum-web-components/tabs/sp-tab.js';
import '@spectrum-web-components/tabs/sp-tab-panel.js';

When looking to leverage the Tabs, Tab, or TabPanel base class as a type and/or for extension purposes, do so via:

import {
    Tabs,
    Tab,
    TabPanel
} from '@spectrum-web-components/tabs';

Sizes

Small Medium 
<sp-tabs selected="1" size="m">
    <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"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
 Large Extra Large

Horizontal Tabs

An <sp-tabs> element will display horizontally by default. It can be modified with states like compact, disabled, and quiet, or with content like icons, etc.

Compact

Compact tabs should never be used without the quiet variation. Please use Quiet + Compact Tabs instead.

<sp-tabs selected="1" compact>
    <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"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
 Disabled Icons Quiet Quiet + Compact

Vertical Tabs

An <sp-tabs> element will display horizontally by default. It can be modified with states like compact, disabled, and quiet, or with content like icons, etc.

Compact

Compact tabs should never be used without the quiet variation. Please use Quiet + Compact Tabs instead.

<sp-tabs selected="1" compact direction="vertical">
    <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"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
 Disabled Icons Quiet Quiet + Compact

Accessibility

When an <sp-tabs> 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-tabs> 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-tabs> element, the left and right arrows will move that focus back and forth through the available <sp-tab> children.