sp-tabs-overflow
Attributes and Properties #
compact
compact
boolean
false
dir
dir
'ltr' | 'rtl'
'ltr'
Description #
The <sp-tabs-overflow>
is a decorative component that works in conjunction with the <sp-tabs>
component. It enables horizontal tab scrolling in cases where the available width is insufficient to display all tabs.
Note: Veritical scrolling is not yet supported.
Usage #
yarn add @spectrum-web-components/tabs
To import the <sp-tabs-overflow>
component with its associated side effects, use the following import statement:
import '@spectrum-web-components/tabs/sp-tabs-overflow.js';
To utilize the TabsOverflow
base class as a type or for extending its functionality, utilize the following method:
import { TabsOverflow } from '@spectrum-web-components/tabs';
Example #
To use the <sp-tabs-overflow>
component, simply wrap it around the <sp-tabs>
element as a child element:
<div class="container" style="max-width: 250px">
<sp-tabs-overflow>
<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 label="Tab 5" value="5"></sp-tab>
<sp-tab label="Tab 6" value="6"></sp-tab>
<sp-tab label="Tab 7" value="7"></sp-tab>
<sp-tab label="Tab 8" value="8"></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-tab-panel value="5">Content for Tab 5</sp-tab-panel>
<sp-tab-panel value="6">Content for Tab 6</sp-tab-panel>
<sp-tab-panel value="7">Content for Tab 7</sp-tab-panel>
<sp-tab-panel value="8">Content for Tab 8</sp-tab-panel>
</sp-tabs>
</sp-tabs-overflow>
</div>