docs(tabs): update examples

This commit is contained in:
Benjamin Canac
2024-07-24 14:22:02 +02:00
parent ecad41a7fa
commit e1b0936105
3 changed files with 30 additions and 27 deletions

View File

@@ -9,6 +9,13 @@ const items = [
]
const selected = ref('1')
// Note: This is for demonstration purposes only.
onMounted(() => {
setInterval(() => {
selected.value = selected.value === '0' ? '1' : '0'
}, 1000)
})
</script>
<template>

View File

@@ -0,0 +1,16 @@
<script setup lang="ts">
const open = ref(true)
// Note: This is for demonstration purposes only.
onMounted(() => {
setInterval(() => {
open.value = !open.value
}, 1000)
})
</script>
<template>
<UTooltip v-model:open="open" text="Open on GitHub">
<UButton icon="i-simple-icons-github" />
</UTooltip>
</template>

View File

@@ -117,43 +117,23 @@ props:
---
::
### Default value
## Examples
Use the `default-value` prop to set the default value of the Tabs with the index of the item. You can also pass the value of one of the items if provided.
### Control selected tab
::component-code
---
ignore:
- items
- content
- defaultValue
external:
- items
hide:
- class
props:
defaultValue: '1'
class: 'w-full'
content: false
items:
- label: Account
- label: Password
---
::
### Model value
You can control the selected tab by using the `v-model` directive.
You can control the selected tab by using the `default-value` prop or the `v-model` directive with the index of the item.
::component-example
---
name: 'tabs-model-value-example'
name: 'tabs-selected-example'
props:
class: 'w-full'
---
::
## Examples
::tip
You can also pass the value of one of the items if provided.
::
### With content slot