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

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>

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. :::

<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>

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.

<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>

Overview content Activity content

<template #tabs-right>