Tabs

Tabs are used to hide information until a user chooses to see it. You can use tabs to show two sets of information on the same page without the user needing to navigate away.

Prop	Data type	Required?	Description
title	String	Yes	The title of the tab

Tabbed elements

WARNING

The <fw-tab> component must be nested inside a <fw-tabs> component.

<fw-tabs>
  <fw-tab title="Overview">Overview content</fw-tab>
  <fw-tab title="Activity">Activity content</fw-tab>
</fw-tabs>

INFO

If you add the same tab multiple times, the tab is rendered once with the combined content from the duplicates.

<fw-tabs>
  <fw-tab title="Overview">Overview content</fw-tab>
  <fw-tab title="Activity">Activity content</fw-tab>
  <fw-tab title="Overview">More overview content</fw-tab>
</fw-tabs>

Tabs-right slot

You can add a template to the right side of the tabs using the #tabs-right directive.

<fw-tabs>
  <fw-tab title="Overview">Overview content</fw-tab>
  <fw-tab title="Activity">Activity content</fw-tab>

  <template #tabs-right>
    <fw-input icon="bi-search" placeholder="Search" />
  </template>
</fw-tabs>