funkwhale/front/ui-docs/components/ui/tabs.md

import Tabs from "~/components/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.

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

Tabbed elements

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

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

Overview content Activity content

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

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

Overview content Activity content More overview content

Tabs-right slot

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

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

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

Overview content Activity content

<template #tabs-right>

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!