sp-tabs-overflow
NPM
0.48.1
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
compact
compact
boolean
false
labelNext
label-next
string
'Scroll to next tabs'
labelPrevious
label-previous
string
'Scroll to previous tabs'
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>
Accessibility #
The <sp-tabs-overflow>
component is not focusable via Keyboard Tab Navigation. The Tabs Overflow buttons only help visually scroll down the list of Tabs. Keyboard users can navigate through all elements inside the Tabs list using arrow keys, and Keyboard users will always initially focus on the very first Tab element, no matter how visually scrolled the Tab group might be. Therefore, the <sp-tabs-overflow>
component is not useful for Keyboard Tab Navigation, so it is removed as to not be a hinderance.