70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<script setup>
|
|
const currentTab = ref('tab-1')
|
|
</script>
|
|
|
|
<template>
|
|
<VCard>
|
|
<div class="d-flex">
|
|
<div>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
direction="vertical"
|
|
>
|
|
<VTab>
|
|
<VIcon
|
|
start
|
|
icon="tabler-user"
|
|
/>
|
|
Option 1
|
|
</VTab>
|
|
|
|
<VTab>
|
|
<VIcon
|
|
start
|
|
icon="tabler-lock"
|
|
/>
|
|
Option 2
|
|
</VTab>
|
|
|
|
<VTab>
|
|
<VIcon
|
|
start
|
|
icon="tabler-access-point"
|
|
/>
|
|
Option 3
|
|
</VTab>
|
|
</VTabs>
|
|
</div>
|
|
|
|
<VCardText>
|
|
<VWindow
|
|
v-model="currentTab"
|
|
class="ms-3"
|
|
>
|
|
<VWindowItem value="tab-1">
|
|
<p>
|
|
Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero.
|
|
</p>
|
|
|
|
<p class="mb-0">
|
|
Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et, tincidunt eget.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem value="tab-2">
|
|
<p class="mb-0">
|
|
Morbi nec metus. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem value="tab-3">
|
|
<p class="mb-0">
|
|
Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper.
|
|
</p>
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</div>
|
|
</VCard>
|
|
</template>
|