Appearance

Tabs ​

Tabs help users understand and navigate groups of related content that are at the same level of hierarchy. There are two ways tabs are used to organize content. Either by navigating between pages or multiple tables on the same page.

Two variants: Line (default) and Enclosed
Use Line to navigate across pages
Use Enclosed to navigate multiple Tables

Tabs can have a supporting icon, badge or both. The height of all tabs is fixed to 36px. The width is variable depending on the length of the label. It is recommended to limit the label to two words.

Basic Usage ​

The <Tabs> and <Tab> components are used to render the tabs.

Additionally, in order to maintain optimal accessibility, each tab's corresponding tab panel should have role="tabpanel" and id="tabpanel-my-tab-value" where my-tab-value matches the value prop on a <Tab> component.

overview panel
vue
<script setup lang="ts">
import { ref } from "vue";
import Tab from "@leaflink/stash/Tab";
import Tabs from "@leaflink/stash/Tabs";

const activeTab = ref("overview");
</script>

<template>
  <Tabs v-model:active-tab="activeTab">
    <Tab value="overview">Overview</Tab>
    <Tab value="payment-and-transfers">Payment & Transfers</Tab>
    <Tab value="transactions">Transactions</Tab>
  </Tabs>
  <div
    id="tabpanel-overview"
    role="tabpanel"
    class="tw-bg-white tw-p-6 tw-rounded-b"
    :hidden="activeTab !== 'overview'"
  >
    overview panel
  </div>
  <div
    id="tabpanel-payment-and-transfers"
    role="tabpanel"
    class="tw-bg-white tw-p-6 tw-rounded-b"
    :hidden="activeTab !== 'payment-and-transfers'"
  >
    payment-and-transfers panel
  </div>
  <div
    id="tabpanel-transactions"
    role="tabpanel"
    class="tw-bg-white tw-p-6 tw-rounded-b"
    :hidden="activeTab !== 'transactions'"
  >
    transactions panel
  </div>
</template>

Tabs Playground ​

Tab Playground ​

Anatomy ​

Line (default)
Enclosed
  1. Icon
  2. Tab label
  3. Badge Slot
  4. Border
  5. Target / focus area

When the to prop is provided, <Tab> renders a RouterLink internally which allows vue-router to handle navigation.

Additionally, the routerLinkProps prop can be used to provide extra props to the RouterLink component internally.

panel
template
<Tabs :active-tab="activeTab">
  <Tab value="overview" to="overview">Overview</Tab>
  <Tab value="payment-and-transfers" to="p-and-t">Payment & Transfers</Tab>
  <Tab value="transactions" to="transactions">Transactions</Tab>
</Tabs>

When the href prop is provided, <Tab> renders an <a> internally which allows server-side navigation, such as with legacy Django pages in the Marketplace application.

Additionally, the anchorProps prop can be used to provide extra props to the <a> element internally.

overview panel
template
<Tabs :active-tab="activeTab">
  <Tab value="overview" href="overview">Overview</Tab>
  <Tab value="payment-and-transfers" href="p-and-t">Payment & Transfers</Tab>
  <Tab value="transactions" href="transactions">Transactions</Tab>
</Tabs>

Badge ​

The Tab component can render an inline badge using the badge prop. The badge can be used to display extra information, such as the number of pending transactions:

overview panel
template
<Tabs v-model:active-tab="activeTab">
  <Tab value="overview">Overview</Tab>
  <Tab value="payment-and-transfers">Payment & Transfers</Tab>
  <Tab value="transactions" badge="19">Transactions</Tab>
</Tabs>

Disabled ​

The Tab component can be disabled via the disabled prop

payment-and-transfers panel
template
<Tabs v-model:active-tab="activeTab">
  <Tab value="overview" disabled>Overview</Tab>
  <Tab value="payment-and-transfers">Payment & Transfers</Tab>
  <Tab value="transactions">Transactions</Tab>
  <Tab value="documents" disabled badge="99">Documents</Tab>
</Tabs>

Variants ​

The component has two variants:

  • line (default)
  • enclosed

The above examples show the "line" variant. Here is the "enclosed" variant:

overview panel
template
<Tabs v-model:active-tab="activeTab" variant="enclosed">
  <Tab value="overview">Overview</Tab>
  <Tab value="payment-and-transfers">Payment & Transfers</Tab>
  <Tab value="transactions">Transactions</Tab>
</Tabs>

More Button ​

The component will automatically show a "More" button if there are too many tabs to fit on the screen.

overview panel
template
<Tabs v-model:active-tab="activeTab" variant="enclosed">
  <Tab value="overview">Overview</Tab>
  <Tab value="payment-and-transfers">Payment & Transfers</Tab>
  <Tab value="transactions">Transactions</Tab>
  <Tab value="documents">Documents</Tab>
  <Tab value="accounts">Accounts</Tab>
  <Tab value="recipients">Recipients</Tab>
</Tabs>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.