sp-tab-panel

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
selected selected boolean false
value value string ''

Slots #

Name Description
default slot content of the Tab Panel

Description #

An <sp-tab-panel> contains the content that will be displayed when an <sp-tab> becomes selected. An <sp-tab-panel> can be associated with an <sp-tab> by sharing the same 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-panel> via:

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

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

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

Examples #

<sp-tabs selected="1">
<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>

Customizing transitions #

The state of the <sp-tab-panel> is reflected to the boolean selected attribute, which can be used to customize the transition between panels when the selection changes.

<style>
sp-tabs {
display: grid;
grid-template-rows: 100%;
grid-template-columns: auto 1fr;
}
sp-tab-panel {
grid-area: 1/2/1/2;
transition: opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
opacity: 1;
height: 100%;
position: relative;
z-index: 2;
}
sp-tab-panel:not([selected]) {
transition: opacity 0.5s ease-in-out 0s, height 0s ease-in-out 0.5s,
transform 0.5s ease-in-out 0s;
display: block;
opacity: 0;
height: 0;
transform: translateX(20px);
z-index: 2;
}
</style>
<sp-tabs selected="1" 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>