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 4 or more navigation items in the Tab Group it’s automatically converted to a select menu on small viewports.

Examples

<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>

<script>
  // Select the above tab group component
  var tabs = document.querySelector("duet-tab-group")

  // Listen for change events in the tabs
  tabs.addEventListener("duetTabChange", function(e) {
    console.log("Change detected in tabs:", e.detail)
  })
</script>

<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>

<duet-tab-group>
  <duet-tab label="Outer 1" selected>Outer tab 1 content</duet-tab>
  <duet-tab label="Outer 2">
    Outer tab 2 content
    <duet-tab-group>
      <duet-tab label="Inner 1" selected>Inner tab 1 content</duet-tab>
      <duet-tab label="Inner 2">Inner tab 2 content</duet-tab>
      <duet-tab label="Inner 3">Inner tab 3 content</duet-tab>
    </duet-tab-group>
  </duet-tab>
  <duet-tab label="Outer 3">Outer tab 3 content</duet-tab>
</duet-tab-group>

Properties #

Events #

Methods #

openTab(tabIndex: 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>

refresh() => Promise<void> #

[DEPRECATED]

This method used to refresh the contents of the tab group
but is now deprecated as this is done automatically.

Returns #

Type: Promise<void>

Integration

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

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.