Web Components - Tab

Tabs are displayed as a set of layered sections of content, where one selected panel of content is displayed above all the other sections. Each tab panel has an associated tab element that, when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel.

Set-up

import { provideDesignSystem, alphaTabs, alphaTab, alphaTabPanel } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaTabs(), alphaTab(), alphaTabPanel());

Attributes

When you declare an <alpha-tabs>, you can define the following attributes:

Name	Type	Description
activeid	string	Sets the corresponding <alpha-tab> to active
activeindicator	boolean	Activates or deactivates the selected tab indicator
orientation	string	Defines the orientation of the tabs. It can be: horizontal or vertical. Default: horizontal

alpha-tab

For each tab, you need to declare an <alpha-tab>, where you can define the following attributes:

Name	Type	Description
disabled	boolean	Disables the tab, so the user cannot interact with it
id	string	Sets the id for the tab

alpha-tab-panel

For each tab, you must also declare an alpha-tab-panel. This is the component that hosts the content of the tab.

Name	Type	Description
id	string	Links the panel to its corresponding tab

note

The alpha-tab-panel is linked to its corresponding alpha-tab based on the order. So the first alpha-tab is linked to the first alpha-tab-panel, the second alpha-tab is linked to the second alpha-tab-panel, and so on.

Event

These are the available events you can use:

Name	component	Description
change	<alpha-tabs>	Fires an event when changing tabs
click	<alpha-tabs> and <alpha-tab>	Fires an event when clicking on a tab

warning

If you use the event @click with <alpha-tabs> it will fire this event every time this component is clicked, regardless of whether the click is in the tab or in its content.

Examples

Below are three examples of how to use tabs, tab and tab-panel

• Create three tabs, with the first one disabled (it is displayed, but once another tab is clicked, you cannot go back to it):

<alpha-tabs activeid="tab1">
    <alpha-tab disabled id="tab1">Tab 1</alpha-tab>
    <alpha-tab id="tab2">Tab 2</alpha-tab>
    <alpha-tab id="tab3">Tab 3</alpha-tab>
    <alpha-tab-panel id="tab1">
        This is tab number 1
    </alpha-tab-panel>
    <alpha-tab-panel id="tab2">
    This is tab number 2
    </alpha-tab-panel>
    <alpha-tab-panel id="tab3">
        This is tab number 3
    </alpha-tab-panel>
</alpha-tabs>

• Create four tabs, vertically orientated:

<alpha-tabs orientation="vertical">
    <alpha-tab id="tab1">Tab 1</alpha-tab>
    <alpha-tab id="tab2">Tab 2</alpha-tab>
    <alpha-tab id="tab3">Tab 3</alpha-tab>
    <alpha-tab id="tab4">Tab 4</alpha-tab>
    <alpha-tab-panel id="tab1">
      One for sorrow
    </alpha-tab-panel>
    <alpha-tab-panel id="tab2">
     Two for joy
    </alpha-tab-panel>
    <alpha-tab-panel id="tab3">
      Three for a girl
    </alpha-tab-panel>
    <alpha-tab-panel id="tab4">
      Four for a boy
    </alpha-tab-panel>
</alpha-tabs>

• Create three tabs, with an @change event calling a function called function(). This function needs to be defined in the main class of your application

<alpha-tabs @change=${(x) => x.function()}>
  <alpha-tab id="tab1">Tab 1</alpha-tab>
  <alpha-tab id="tab2">Tab 2</alpha-tab>
  <alpha-tab id="tab3">Tab 3</alpha-tab>
  <alpha-tab-panel id="tab1">
      This is tab number 1
  </alpha-tab-panel>
  <alpha-tab-panel id="tab2">
      This is tab number 2
  </alpha-tab-panel>
  <alpha-tab-panel id="tab3">
      This is tab number 3
  </alpha-tab-panel>
</alpha-tabs>

Try yourself

Live Editor

<alpha-tabs>
    <alpha-tab id="tab1">Tab 1</alpha-tab>
    <alpha-tab id="tab2">Tab 2</alpha-tab>
    <alpha-tab id="tab3">Tab 3</alpha-tab>
    <alpha-tab-panel id="tab1">
        This is tab number 1
    </alpha-tab-panel>
    <alpha-tab-panel id="tab2">
        This is tab number 2
    </alpha-tab-panel>
    <alpha-tab-panel id="tab3">
        This is tab number 3
    </alpha-tab-panel>
</alpha-tabs>

Result

Loading...

Use cases

• Information grouping
• Wizard steps

Additional resources

• W3C Component Aria Practices