Package detail

@spectrum-web-components/tab

adobe334Apache-2.00.3.10

The <sp-tab> component is intended to be the child of an <sp-tab-list> element and accepts both a label attribute and a [slot="icon"] child to define its contents. Those contents can be further customized with the vertical attribute which stacks

spectrum css, web components, lit-element, lit-html

readme

Description

The <sp-tab> component is intended to be the child of an <sp-tab-list> element and accepts both a label attribute and a [slot="icon"] child to define its contents. Those contents can be further customized with the vertical attribute which stacks them in the UI rather than listing them in a row.

Installation

See it on NPM! How big is this package in your project?

npm install @spectrum-web-components/tab

# or

yarn add @spectrum-web-components/tab

Example

<sp-tab-list 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-list>

Variants

Icon

<sp-icons-medium></sp-icons-medium>
<sp-tab label="Tab 1" value="1">
    <sp-icon slot="icon" size="s" name="ui:CheckmarkSmall"></sp-icon>
</sp-tab>

Vertical w/ icon

<sp-tab label="Tab 1" value="1" vertical>
    <sp-icon slot="icon" size="s" name="ui:CheckmarkSmall"></sp-icon>
</sp-tab>

Accessibility

By default, an <sp-tab> element has [tabindex="-1"] so that it can be focused programmatically. When an <sp-tab> element is [selected] or isthe first <sp-tab> in an <sp-tab-list> element with no selected value, it will be given [tabindex="0"].

changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.3.10 (2020-06-08)

Note: Version bump only for package @spectrum-web-components/tab

0.3.9 (2020-05-08)

Bug Fixes

  • tab: use Spectrum CSS relative values for overrides (f2e22f8)

0.3.8 (2020-04-16)

Performance Improvements

  • use "sideEffects" listing in package.json (7271614)

0.3.7 (2020-04-10)

Bug Fixes

  • tab: allow icon only, expand visual regression suite (a167550)

0.3.6 (2020-04-07)

Bug Fixes

  • tab-list: correct specificity collision (622887e)

0.3.5 (2020-03-13)

Bug Fixes

  • tab-list: position the indicator correctly when sized (e956758)

0.3.4 (2020-03-11)

Bug Fixes

  • tab-list: add support for "vertical-right" (da740c0)

0.3.3 (2020-02-05)

Note: Version bump only for package @spectrum-web-components/tab

0.3.2 (2020-02-01)

Note: Version bump only for package @spectrum-web-components/tab

0.3.1 (2020-01-30)

Note: Version bump only for package @spectrum-web-components/tab

0.3.0 (2020-01-06)

Features

  • upgrade accessibility of tab/tab-list family of elements (c7ea803)
  • tab-list: autofocus, :before/after processing, visual test (83dddb0)

0.2.3 (2019-12-12)

Note: Version bump only for package @spectrum-web-components/tab

0.2.2 (2019-12-02)

Note: Version bump only for package @spectrum-web-components/tab

0.2.1 (2019-11-27)

Bug Fixes

  • include "type" in package.json, generate custom-elements.json (1a8d716)

0.2.0 (2019-11-19)

Features

  • tab: use @spectrum-css/tab, support :host(:before) selector (ace96f9)
  • use :focus-visable (via polyfill) instead of :focus (11c6fc7)
  • use @adobe/spectrum-css@2.15.1 (3918888)

0.1.5 (2019-11-01)

Note: Version bump only for package @spectrum-web-components/tab

0.1.4 (2019-10-14)

Performance Improvements

  • use imported TypeScript helpers instead of inlining them (cc2bd0a)

0.1.3 (2019-10-03)

Note: Version bump only for package @spectrum-web-components/tab