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.

INFO

Dev Note: 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; the TabPanel component will handle this for you.

overview panel
payment-and-transfers panel
transactions panel
vue
<script setup lang="ts">
import { ref } from "vue";
import Tab from '@leaflink/stash/Tab';
import Tabs from '@leaflink/stash/Tabs';
import TabPanel from '@leaflink/stash/TabPanel';

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>
  <TabPanel tab-value="overview" :active-tab="activeTab">
    <Module>overview panel</Module>
  </TabPanel>
  <TabPanel tab-value="payment-and-transfers" :active-tab="activeTab">
    <Module>payment-and-transfers panel</Module>
  </TabPanel>
  <TabPanel tab-value="transactions" :active-tab="activeTab">
    <Module>transactions panel</Module>
  </TabPanel>
</template>

Tabs Playground ​

overview panel
payment-and-transfers panel
transactions panel

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.

overview panel
payment-and-transfers panel
transactions 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
payment-and-transfers panel
transactions 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
payment-and-transfers panel
transactions 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

overview panel
payment-and-transfers panel
transactions panel
documents 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
payment-and-transfers panel
transactions 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
payment-and-transfers panel
transactions panel
documents panel
accounts panel
recipients panel
other1 panel
other2 panel
other3 panel
other4 panel
other5 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.