sp-tabs-overflow

NPM 1.5.0

View Storybook

Try it on webcomponents.dev
Overview API

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

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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.

Attributes and Properties

Property Attribute Type Default Description compact compact boolean false labelNext label-next string 'Scroll to next tabs' labelPrevious label-previous string 'Scroll to previous tabs'