Skip to main content
LocalTapiola Turva

Tab Group ready

Tab Group is used as a graphical interface element that allows multiple panels to be contained within a single window, using tabs as a navigational element.

When there are six or more navigation items in the Tab Group it’s automatically converted to a select menu on small viewports.

Examples

Open in new window
<duet-tab-group>
  <duet-tab label="Yhteenveto">Tab 1 content</duet-tab>
  <duet-tab label="Säästösuunnitelma" selected>Tab 2 content</duet-tab>
  <duet-tab label="Säästöt">Tab 3 content</duet-tab>
  <duet-tab label="Eläkesuunnitelma">Tab 4 content</duet-tab>
  <duet-tab label="Asiointi">Tab 5 content</duet-tab>
</duet-tab-group>
Open in new window
<duet-tab-group>
  <duet-tab label="Yhteenveto">Tab 1 content</duet-tab>
  <duet-tab label="Säästösuunnitelma" selected>Tab 2 content</duet-tab>
  <duet-tab label="Säästöt">Tab 3 content</duet-tab>
  <duet-tab label="Eläkesuunnitelma">Tab 4 content</duet-tab>
  <duet-tab label="Asiointi">Tab 5 content</duet-tab>
  <duet-tab label="Omat tiedot">Tab 6 content</duet-tab>
</duet-tab-group>
Open in new window
<duet-tab-group>
  <duet-tab label="Yhteenveto" selected>
    <duet-card padding="large">
      <duet-heading level="h3">Yhteenveto</duet-heading>
      <duet-paragraph>Tab 1 content</duet-paragraph>
    </duet-card>
  </duet-tab>
  <duet-tab label="Säästösuunnitelma">
    <duet-card padding="large">
      <duet-heading level="h3">Säästösuunnitelma</duet-heading>
      <duet-paragraph>Tab 2 content</duet-paragraph>
    </duet-card>
  </duet-tab>
  <duet-tab label="Säästöt">
    <duet-card padding="large">
      <duet-heading level="h3">Säästöt</duet-heading>
      <duet-paragraph>Tab 3 content</duet-paragraph>
    </duet-card>
  </duet-tab>
  <duet-tab label="Eläkesuunnitelma">
    <duet-card padding="large">
      <duet-heading level="h3">Eläkesuunnitelma</duet-heading>
      <duet-paragraph>Tab 4 content</duet-paragraph>
    </duet-card>
  </duet-tab>
  <duet-tab label="Asiointi">
    <duet-card padding="large">
      <duet-heading level="h3">Asiointi</duet-heading>
      <duet-paragraph>Tab 5 content</duet-paragraph>
    </duet-card>
  </duet-tab>
</duet-tab-group>

Properties #

PropertyAttributeDescriptionTypeDefault
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
paddingpaddingControls the padding of the component. Can be one of: "auto", "none".string"auto"
themethemeTheme of the tab. Can be one of: "default", "turva".string""

Events #

EventDescriptionType
duetChangeCallback for when the value changed.CustomEvent<any>

Methods #

openTab(index: number) => Promise<void> #

This method allows you to open any of the tabs by calling the method and passing the index of the tab. Please note that index starts from zero.

Returns #

Type: Promise<void>

Dependencies #

Depends on #

Graph #

graph TD;
  duet-tab-group --> duet-select
  duet-select --> duet-label
  duet-select --> duet-tooltip
  duet-tooltip --> duet-visually-hidden
  style duet-tab-group fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.