sp-tab-panel
Attributes and Properties #
selected
selected
boolean
false
value
value
string
''
Slots #
default slot
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 #
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>