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

<script setup lang="ts">
import Input from '~/components/ui/Input.vue'
import Tabs from '~/components/ui/Tabs.vue'
import Tab from '~/components/ui/Tab.vue'
</script>

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

```vue-html
<Tabs>
  <Tab title="Overview">Overview content</Tab>
  <Tab title="Activity">Activity content</Tab>
</Tabs>
```

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

```vue-html{2,4}
<Tabs>
  <Tab title="Overview">Overview content</Tab>
  <Tab title="Activity">Activity content</Tab>
  <Tab title="Overview">More overview content</Tab>
</Tabs>
```

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

```vue-html{5-7}
<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>
  <Tab title="Overview">Overview content</Tab>
  <Tab title="Activity">Activity content</Tab>

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