kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
68 wiersze
1.8 KiB
Markdown
68 wiersze
1.8 KiB
Markdown
|
# 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.
|
||
|
|
:::
|
||
|
|
|
||
|
|
```vue-html
|
||
|
|
<fw-tabs>
|
||
|
|
<fw-tab title="Overview">Overview content</fw-tab>
|
||
|
|
<fw-tab title="Activity">Activity content</fw-tab>
|
||
|
|
</fw-tabs>
|
||
|
|
```
|
||
|
|
|
||
|
|
<fw-tabs>
|
||
|
|
<fw-tab title="Overview">Overview content</fw-tab>
|
||
|
|
<fw-tab title="Activity">Activity content</fw-tab>
|
||
|
|
</fw-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}
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
## Tabs-right slot
|
||
|
|
|
||
|
|
You can add a template to the right side of the tabs using the `#tabs-right` directive.
|
||
|
|
|
||
|
|
```vue-html{5-7}
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
|
||
|
|
<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>
|