mirror of
https://github.com/directus/directus.git
synced 2026-02-13 21:55:07 -05:00
c2e7c85bbd
* move component docs to documentation * update app docs tables for components * update docs * Add components to docs sidebar * fix generated tables * fix tables * rename transitions * update tables * update nested components * update tables * update tables * update tables * update v-table table * add basic documentation to each component * remove all stories of storybook * add missing documentation * undate tables * update tables * update docs sidebar * update app docs * remove unused references * add general readme * update docs * make reference titiles smaller * add reference tag * improve docs * update order of tabs in sidebar * remove all readmes and stories from interfaces/displays * Cleanup menu * Remove storybook Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
63 lines
1.5 KiB
Markdown
63 lines
1.5 KiB
Markdown
# Tabs
|
|
|
|
Tabs work like tabs in the browser and are there to split data into quickly accessable pages.
|
|
|
|
```html
|
|
<v-tabs v-model="activePage">
|
|
<v-tab>Tab 1</v-tab>
|
|
<v-tab>Tab 2</v-tab>
|
|
<v-tab>Tab 3</v-tab>
|
|
</v-tabs>
|
|
```
|
|
|
|
## With Tab Items
|
|
|
|
To be able to display a page depending on the tab use tab items.
|
|
|
|
```html
|
|
<v-tabs v-model="activePage">
|
|
<v-tab>Tab 1</v-tab>
|
|
<v-tab>Tab 2</v-tab>
|
|
<v-tab>Tab 3</v-tab>
|
|
</v-tabs>
|
|
|
|
<v-tabs-items v-model="activePage">
|
|
<v-tab-item>
|
|
<h1>This is the first page</h1>
|
|
</v-tab-item>
|
|
<v-tab-item>
|
|
<h1>This is the second page</h1>
|
|
</v-tab-item>
|
|
<v-tab-item>
|
|
<h1>This is the third page</h1>
|
|
</v-tab-item>
|
|
</v-tabs-items>
|
|
```
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ---------- | ------------------------------------- | ----------- | ---------------------- |
|
|
| `value` | The currently selected tab | `undefined` | `(string or number)[]` |
|
|
| `vertical` | Display the tabs in a vertical format | `false` | `Boolean` |
|
|
|
|
#### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| -------------------------- | -------------------------- |
|
|
| `--v-tabs-underline-color` | `var(--foreground-normal)` |
|
|
|
|
#### Events
|
|
|
|
| Event | Description | Value |
|
|
| ------- | ------------------------------- | ----- |
|
|
| `input` | Used to update the selected tab | |
|
|
|
|
#### Slots
|
|
|
|
| Slot | Description | Data |
|
|
| --------- | ----------- | ---- |
|
|
| _default_ | | |
|