74 lines
1.8 KiB
Markdown
74 lines
1.8 KiB
Markdown
<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>
|