Funkwhale UI

Appearance

WARNING

This component is currently not used in the Funkwhale app. See Nav for an alternative that supports all features of this component and fixes the accessibility issues.

ts
import Tabs from "@ui/Tabs.vue"

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.

PropData typeRequired?Description
titleStringYesThe title of the tab

Tabbed elements ​

WARNING

The <Tab> component must be nested inside a <Tabs> component.

template
<Tabs>
  <Tab title="Overview">Overview content</Tab>
  <Tab title="Activity">Activity content</Tab>
</Tabs>

INFO

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

template
<Tabs>
  <Tab title="Overview">Overview content</Tab>
  <Tab title="Activity">Activity content</Tab>
  <Tab title="Overview">More overview content</Tab>
</Tabs>

Tabs-right slot ​

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

template
<Tabs>
  <Tab title="Overview">Overview content</Tab>
  <Tab title="Activity">Activity content</Tab>

  <template #tabs-right>
    <Input icon="bi-search" placeholder="Search" />
  </template>
</Tabs>

Tabs and routes ​

If the tab content covers most of the page, users will expect that they can navigate to the previous tab with the "back" button of the browser (See Navigation).

In this case, add the :to prop to each tab, and place a RouterView with the intended props of the route's component into its default slot.

Note that this only compares the name. Make sure to add a name field to identify paths in your router config!

Using this component

Accessible tabs ​

See Nav for a full-featured, accessible alternative.

Relevant WCAG2 criteria

A11y Checklist ​

See Nav