DemoTabsStacked.vue
1020 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script setup>
const currentTab = ref('tab-1')
const tabItemText = 'Biscuit cheesecake gingerbread oat cake tiramisu. Marzipan tiramisu jelly-o muffin biscuit jelly cake pie. Chocolate cookie candy croissant brownie cupcake powder cheesecake. Biscuit sesame snaps biscuit topping tiramisu croissant.'
</script>
<template>
<VTabs
v-model="currentTab"
grow
stacked
>
<VTab value="tab-1">
<VIcon
icon="ri-phone-line"
class="mb-2"
/>
<span>Recent</span>
</VTab>
<VTab value="tab-2">
<VIcon
icon="ri-heart-line"
class="mb-2"
/>
<span>Favorites</span>
</VTab>
<VTab value="tab-3">
<VIcon
icon="ri-account-box-line"
class="mb-2"
/>
<span>Nearby</span>
</VTab>
</VTabs>
<VWindow
v-model="currentTab"
class="mt-5"
>
<VWindowItem
v-for="i in 3"
:key="i"
:value="`tab-${i}`"
>
{{ tabItemText }}
</VWindowItem>
</VWindow>
</template>