mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-02-01 04:37:57 +01:00
docs(tabs): update
This commit is contained in:
@@ -11,6 +11,115 @@ links:
|
|||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
Use the `items` prop as an array of objects with the following properties:
|
||||||
|
|
||||||
|
- `label?: string`{lang="ts-type"}
|
||||||
|
- `icon?: string`{lang="ts-type"}
|
||||||
|
- `avatar?: AvatarProps`{lang="ts-type"}
|
||||||
|
- `slot?: string`{lang="ts-type"}
|
||||||
|
- `content?: string`{lang="ts-type"}
|
||||||
|
- `value?: StringOrNumber`{lang="ts-type"}
|
||||||
|
- `disabled?: boolean`{lang="ts-type"}
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
external:
|
||||||
|
- items
|
||||||
|
hide:
|
||||||
|
- class
|
||||||
|
props:
|
||||||
|
class: 'w-full'
|
||||||
|
items:
|
||||||
|
- label: Tab 1
|
||||||
|
icon: 'i-heroicons-academic-cap'
|
||||||
|
content: 'Content 1'
|
||||||
|
- label: Tab 2
|
||||||
|
icon: 'i-heroicons-user'
|
||||||
|
content: 'Content 2'
|
||||||
|
- label: Tab 3
|
||||||
|
icon: 'i-heroicons-bell'
|
||||||
|
content: 'Content 3'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
::tip
|
||||||
|
You can use Tabs without content by setting the `content` prop to `false`.
|
||||||
|
::
|
||||||
|
|
||||||
|
### Style
|
||||||
|
|
||||||
|
Use the `color` and `variant` props to change the style of the Tabs.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
ignore:
|
||||||
|
- items
|
||||||
|
- content
|
||||||
|
external:
|
||||||
|
- items
|
||||||
|
hide:
|
||||||
|
- class
|
||||||
|
props:
|
||||||
|
color: gray
|
||||||
|
variant: link
|
||||||
|
class: 'w-full'
|
||||||
|
content: false
|
||||||
|
items:
|
||||||
|
- label: Tab 1
|
||||||
|
- label: Tab 2
|
||||||
|
- label: Tab 3
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Size
|
||||||
|
|
||||||
|
Use the `size` prop to change the size of the Tabs.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
ignore:
|
||||||
|
- items
|
||||||
|
- content
|
||||||
|
external:
|
||||||
|
- items
|
||||||
|
hide:
|
||||||
|
- class
|
||||||
|
props:
|
||||||
|
size: md
|
||||||
|
class: 'w-full'
|
||||||
|
content: false
|
||||||
|
items:
|
||||||
|
- label: Tab 1
|
||||||
|
- label: Tab 2
|
||||||
|
- label: Tab 3
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Orientation
|
||||||
|
|
||||||
|
Use the `orientation` prop to change the orientation of the Tabs.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
ignore:
|
||||||
|
- items
|
||||||
|
- content
|
||||||
|
external:
|
||||||
|
- items
|
||||||
|
hide:
|
||||||
|
- class
|
||||||
|
props:
|
||||||
|
orientation: vertical
|
||||||
|
variant: pill
|
||||||
|
class: 'w-full'
|
||||||
|
content: false
|
||||||
|
items:
|
||||||
|
- label: Tab 1
|
||||||
|
- label: Tab 2
|
||||||
|
- label: Tab 3
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|||||||
@@ -128,7 +128,8 @@ export default defineNuxtConfig({
|
|||||||
'UInput',
|
'UInput',
|
||||||
'UKbd',
|
'UKbd',
|
||||||
'ULink',
|
'ULink',
|
||||||
'UProgress'
|
'UProgress',
|
||||||
|
'UTabs'
|
||||||
].includes(c.pascalName))
|
].includes(c.pascalName))
|
||||||
|
|
||||||
globals.forEach(c => c.global = 'sync')
|
globals.forEach(c => c.global = 'sync')
|
||||||
|
|||||||
Reference in New Issue
Block a user