Tabs ​

The tabs component provides a set of classes to group related content into panels and show one panel at a time.

Tabs implement the spec found in the ARIA Authoring Practices Guide.

Base classes ​

The .tabs class wraps the tab list and its panels. Use .tab-list for the list and give it an accessible name with aria-label or aria-labelledby. Add one .tab-toggle button for each .tab-content panel, keeping the buttons and panels in the same order. If a panel starts with text, add tabindex="0" so readers can reach it by pressing Tab.

Initialization ​

Run the tabs generator after the markup is in the DOM.

import generateTabs from "@graupl/core/tabs/generator";

generateTabs();

The generator sets the roles and ARIA attributes that link each button to its panel. To select a tab initially, set aria-selected="true" on its button and add .show to its panel so it is visible before initialization. If no tab is marked as selected, the first tab is selected during initialization.

Variants ​

By default, no theme variants are generated.

If you are compiling your own version of Graupl, you can set the tabs module’s $themeable variable to true to generate the .primary, .secondary, and .tertiary variants. Add a variant class alongside .tabs to style the whole component or to an element inside it to style that part separately.

Custom Properties ​

The following custom properties can be used to customize the tabs component:

Sass variables ​

The following Sass variables can be used to customize the generation of the tabs component.

JavaScript options ​

Pass constructor settings in the generator’s options object. The generator initializes each instance by default. When calling the Tabs constructor directly, initialize defaults to false.