arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-26 01:40:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: consistent usage of :component-example

Browse Source
This commit is contained in:
Benjamin Canac
2023-11-10 11:24:49 +01:00
parent 68f6956d6e
commit 0eb8d8f7ec
13 changed files with 183 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/content/5.navigation/4.tabs.md
View File

@@ -15,19 +15,37 @@ Pass an array to the `items` prop of the Tabs component. Each item can have the
- `content` - The content to display in the panel by default.
- `disabled` - Determines whether the item is disabled or not.
:component-example{component="tabs-example-basic" :componentProps='{"class": "w-full"}'}
::component-example
---
component: 'tabs-example-basic'
componentProps:
class: 'w-full'
---
::
### Vertical
You can change the orientation of the tabs by setting the `orientation` prop to `vertical`.
:component-example{component="tabs-example-vertical" :componentProps='{"class": "w-full"}'}
::component-example
---
component: 'tabs-example-vertical'
componentProps:
class: 'w-full'
---
::
### Default index
You can set the default index of the tabs by setting the `default-index` prop.
:component-example{component="tabs-example-index" :componentProps='{"class": "w-full"}'}
::component-example
---
component: 'tabs-example-index'
componentProps:
class: 'w-full'
---
::
::callout{icon="i-heroicons-exclamation-triangle"}
This will have no effect if you are using a `v-model` to control the selected index.
@@ -37,13 +55,25 @@ You can set the default index of the tabs by setting the `default-index` prop.
You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
:component-example{component="tabs-example-change" :componentProps='{"class": "w-full"}'}
::component-example
---
component: 'tabs-example-change'
componentProps:
class: 'w-full'
---
::
### Control the selected index
Use a `v-model` to control the selected index.
:component-example{component="tabs-example-v-model" :componentProps='{"class": "w-full"}'}
::component-example
---
component: 'tabs-example-v-model'
componentProps:
class: 'w-full'
---
::
::callout{icon="i-heroicons-information-circle"}
In this example, we are binding tabs to the route query. Refresh the page to see the selected tab change.