Astro Web Component for tabs


5.3.04 days ago3 years agoMinified + gzip package size for @astrouxds/rux-tabs in KB



Tabs are used to divide major areas of content and to indicate work process.


Web Components Usage

1. Installation

Install the Astro UXDS Tabs package via Command Line (Preferred Method)

npm i --save @astrouxds/rux-tabs

You may use Yarn, NPM, or your Node package manager of choice. The --save flag adds this component as a dependency in your package.json file.

Alternatively, download the Astro UXDS Component Library source to your project.

Via CLI:

git clone https://github.com/RocketCommunicationsInc/astro-components.git

Or, download the Astro UXDS Components as a .zip

2. Import the Astro Tabs Web Component

This example assumes you're using the NPM package in node_modules. Otherwise, import the component using the path to the Astro Components directory in your project.

import { RuxTabs } from '@astrouxds/rux-tabs/rux-tabs.js'

3. Render the Astro Tabs Web Component

The Astro UXDS Tabs pattern makes use of four Web Components via slots:

  1. Tabs: Container for the tab bar, handles tabs logic and state
  2. Tab: Individual tab title element
  3. Panels: Container for the tab content panels
  4. Panel: Individual tab content element

Note that you only need to import the first component (Astro UXDS Tabs) in your application. The other three are automatically imported by the Astro UXDS Tabs component.

The Astro UXDS Tabs pattern is configured using properties passed into the custom elements via attributes at either the top level or at the child level. Make sure that you set a unique id for <rux-tabs> and each of its children <rux-tab>, and associate each with corresponding aria-labelledby attributes (W3C spec), as indicated below:

<rux-tabs id="tab-set-id-1">
  <rux-tab id="tab-id-1">Tab 1 title</rux-tab>
  <rux-tab id="tab-id-2">Tab 2 title</rux-tab>
  <rux-tab id="tab-id-3">Tab 3 title</rux-tab>

<rux-tab-panels aria-labelledby="tab-set-id-1">
  <rux-tab-panel aria-labelledby="tab-id-1">Tab 1 HTML content</rux-tab-panel>
  <rux-tab-panel aria-labelledby="tab-id-2">Tab 2 HTML content</rux-tab-panel>
  <rux-tab-panel aria-labelledby="tab-id-3">Tab 3 HTML content</rux-tab-panel>

The small property may passed as a simple attribute on the Astro UXDS Tabs container element:

<rux-tabs small id="tab-set-id-1">

Astro UXDS Tab (child) properties are passed as simple attributes on the individual tabs themselves.

<rux-tabs id="tab-set-id-1">
  <rux-tab id="tab-id-1">Tab 1 title</rux-tab>
  <rux-tab id="tab-id-2" selected>Tab 2 title</rux-tab>
  <rux-tab id="tab-id-3" disabled>Tab 3 title</rux-tab>

Tabs Container Attributes

Attribute Type Default Required Description
id String Yes Associates this tab container with a Tabs Panel container element. Must match the aria-labelledby attribute on a <rux-tabs-panels> container element elsewhere within the HTML document.
small Boolean false No If passed or set to true, displays the tabs in a smaller style, suitable for limited-space uses. Previously compact.

Tab Child Attributes

Attribute Type Default Required Description
id String Yes Associates this tab with the tab content in a Tab Panel content element. Must match the aria-labelledby attribute on a <rux-tabs-panel> element elsewhere within the HTML document, within a <rux-tab-panels> container.
selected Boolean false No If present, overrides which tab is selected on load / mount. By default, the first <rux-tab> item is selected.
disabled Boolean false No If present, sets a disabled state on this tab item, indicating it cannot be selected by user action.

Revision History

  • Renamed compact property to small.
  • Removed/deprecated undocumented interior and transparent tab styles.
  • Replaced Polymer 3 implementation with LitElement for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript.
  • Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version
  • Removed prefixed transitions
  • Removed prefixed gradients
  • Updated colors for WCAG compliance
  • Swapped condensed font for standard

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.