69 lines
1.4 KiB
Vue
69 lines
1.4 KiB
Vue
<script setup>
|
|
const currentTab = ref(1)
|
|
|
|
const items = [
|
|
'Appetizers',
|
|
'Entrees',
|
|
'Deserts',
|
|
'Cocktails',
|
|
]
|
|
|
|
const tabItemText = 'Chocolate cake marshmallow toffee sweet caramels tootsie roll chocolate bar. Chocolate candy lemon drops cupcake macaroon liquorice. Icing tiramisu cake pastry jujubes lollipop gummies sugar plum pie.'
|
|
const totalTabs = items.length
|
|
|
|
const preTab = () => {
|
|
if (currentTab.value !== 1)
|
|
currentTab.value -= 1
|
|
}
|
|
|
|
const nextTab = () => {
|
|
if (currentTab.value !== totalTabs)
|
|
currentTab.value += 1
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VCard>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
grow
|
|
>
|
|
<VTab
|
|
v-for="item in items.length"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ items[item - 1] }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="item in items.length"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
|
|
<div class="d-flex justify-center gap-4 mt-3">
|
|
<VBtn
|
|
:disabled="currentTab === 1"
|
|
@click="preTab"
|
|
>
|
|
Previous
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:disabled="currentTab === totalTabs"
|
|
@click="nextTab"
|
|
>
|
|
Next
|
|
</VBtn>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|