897 lines
22 KiB
JavaScript
897 lines
22 KiB
JavaScript
export const alignment = { ts: `<template>
|
|
<!-- Default -->
|
|
<VTabs>
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
|
|
<!-- Center -->
|
|
<VTabs align-tabs="center">
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
|
|
<!-- End -->
|
|
<VTabs align-tabs="end">
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
</template>
|
|
`, js: `<template>
|
|
<!-- Default -->
|
|
<VTabs>
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
|
|
<!-- Center -->
|
|
<VTabs align-tabs="center">
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
|
|
<!-- End -->
|
|
<VTabs align-tabs="end">
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
</template>
|
|
` }
|
|
|
|
export const basic = { ts: `<script lang="ts" setup>
|
|
const currentTab = ref(0)
|
|
const tabItemContent = 'Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears. Pudding candy canes sugar plum cookie chocolate cake powder croissant.'
|
|
</script>
|
|
|
|
<template>
|
|
<VTabs v-model="currentTab">
|
|
<VTab>Tab One</VTab>
|
|
<VTab>Tab Two</VTab>
|
|
<VTab>Tab Three</VTab>
|
|
</VTabs>
|
|
|
|
<VWindow
|
|
v-model="currentTab"
|
|
class="mt-5"
|
|
>
|
|
<VWindowItem
|
|
v-for="item in 3"
|
|
:key="item"
|
|
>
|
|
{{ tabItemContent }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const currentTab = ref(0)
|
|
const tabItemContent = 'Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears. Pudding candy canes sugar plum cookie chocolate cake powder croissant.'
|
|
</script>
|
|
|
|
<template>
|
|
<VTabs v-model="currentTab">
|
|
<VTab>Tab One</VTab>
|
|
<VTab>Tab Two</VTab>
|
|
<VTab>Tab Three</VTab>
|
|
</VTabs>
|
|
|
|
<VWindow
|
|
v-model="currentTab"
|
|
class="mt-5"
|
|
>
|
|
<VWindowItem
|
|
v-for="item in 3"
|
|
:key="item"
|
|
>
|
|
{{ tabItemContent }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</template>
|
|
` }
|
|
|
|
export const basicPill = { ts: `<script lang="ts" setup>
|
|
const currentTab = ref(0)
|
|
const tabItemContent = 'Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears. Pudding candy canes sugar plum cookie chocolate cake powder croissant.'
|
|
</script>
|
|
|
|
<template>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
class="v-tabs-pill"
|
|
>
|
|
<VTab>Tab One</VTab>
|
|
<VTab>Tab Two</VTab>
|
|
<VTab>Tab Three</VTab>
|
|
</VTabs>
|
|
|
|
<VWindow
|
|
v-model="currentTab"
|
|
class="mt-5"
|
|
>
|
|
<VWindowItem
|
|
v-for="item in 3"
|
|
:key="item"
|
|
>
|
|
{{ tabItemContent }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const currentTab = ref(0)
|
|
const tabItemContent = 'Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears. Pudding candy canes sugar plum cookie chocolate cake powder croissant.'
|
|
</script>
|
|
|
|
<template>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
class="v-tabs-pill"
|
|
>
|
|
<VTab>Tab One</VTab>
|
|
<VTab>Tab Two</VTab>
|
|
<VTab>Tab Three</VTab>
|
|
</VTabs>
|
|
|
|
<VWindow
|
|
v-model="currentTab"
|
|
class="mt-5"
|
|
>
|
|
<VWindowItem
|
|
v-for="item in 3"
|
|
:key="item"
|
|
>
|
|
{{ tabItemContent }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</template>
|
|
` }
|
|
|
|
export const customIcons = { ts: `<template>
|
|
<VTabs
|
|
next-icon="ri-arrow-right-line"
|
|
prev-icon="ri-arrow-left-line"
|
|
show-arrows
|
|
>
|
|
<VTab
|
|
v-for="i in 10"
|
|
:key="i"
|
|
>
|
|
Item {{ i }}
|
|
</VTab>
|
|
</VTabs>
|
|
</template>
|
|
`, js: `<template>
|
|
<VTabs
|
|
next-icon="ri-arrow-right-line"
|
|
prev-icon="ri-arrow-left-line"
|
|
show-arrows
|
|
>
|
|
<VTab
|
|
v-for="i in 10"
|
|
:key="i"
|
|
>
|
|
Item {{ i }}
|
|
</VTab>
|
|
</VTabs>
|
|
</template>
|
|
` }
|
|
|
|
export const dynamic = { ts: `<script lang="ts" setup>
|
|
const totalTabs = ref(3)
|
|
const currentTab = ref(0)
|
|
|
|
watch(totalTabs, newValue => {
|
|
currentTab.value = newValue - 1
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<VTabs v-model="currentTab">
|
|
<VTab
|
|
v-for="n in totalTabs"
|
|
:key="n"
|
|
:value="n"
|
|
>
|
|
Tab {{ n }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<!-- buttons -->
|
|
<div class="text-center mt-9">
|
|
<VBtn
|
|
:disabled="!totalTabs"
|
|
variant="text"
|
|
@click="totalTabs--"
|
|
>
|
|
Remove Tab
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
@click="totalTabs++"
|
|
>
|
|
Add Tab
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const totalTabs = ref(3)
|
|
const currentTab = ref(0)
|
|
|
|
watch(totalTabs, newValue => {
|
|
currentTab.value = newValue - 1
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<VTabs v-model="currentTab">
|
|
<VTab
|
|
v-for="n in totalTabs"
|
|
:key="n"
|
|
:value="n"
|
|
>
|
|
Tab {{ n }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<!-- buttons -->
|
|
<div class="text-center mt-9">
|
|
<VBtn
|
|
:disabled="!totalTabs"
|
|
variant="text"
|
|
@click="totalTabs--"
|
|
>
|
|
Remove Tab
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
@click="totalTabs++"
|
|
>
|
|
Add Tab
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const fixed = { ts: `<template>
|
|
<VTabs fixed-tabs>
|
|
<VTab>
|
|
Fixed Tab 1
|
|
</VTab>
|
|
<VTab>
|
|
Fixed Tab 2
|
|
</VTab>
|
|
<VTab>
|
|
Fixed Tab 3
|
|
</VTab>
|
|
<VTab>
|
|
Fixed Tab 4
|
|
</VTab>
|
|
</VTabs>
|
|
</template>
|
|
`, js: `<template>
|
|
<VTabs fixed-tabs>
|
|
<VTab>
|
|
Fixed Tab 1
|
|
</VTab>
|
|
<VTab>
|
|
Fixed Tab 2
|
|
</VTab>
|
|
<VTab>
|
|
Fixed Tab 3
|
|
</VTab>
|
|
<VTab>
|
|
Fixed Tab 4
|
|
</VTab>
|
|
</VTabs>
|
|
</template>
|
|
` }
|
|
|
|
export const grow = { ts: `<script lang="ts" setup>
|
|
const currentTab = ref('Appetizers')
|
|
const items = ['Appetizers', 'Entrees', 'Deserts', 'Cocktails']
|
|
const tabItemText = 'hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer. Gummies sweet brownie brownie marshmallow chocolate cake pastry. Topping macaroon shortbread liquorice dragée macaroon.'
|
|
</script>
|
|
|
|
<template>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
grow
|
|
>
|
|
<VTab
|
|
v-for="item in items"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ item }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VWindow
|
|
v-model="currentTab"
|
|
class="mt-6"
|
|
>
|
|
<VWindowItem
|
|
v-for="item in items"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const currentTab = ref('Appetizers')
|
|
|
|
const items = [
|
|
'Appetizers',
|
|
'Entrees',
|
|
'Deserts',
|
|
'Cocktails',
|
|
]
|
|
|
|
const tabItemText = 'hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer. Gummies sweet brownie brownie marshmallow chocolate cake pastry. Topping macaroon shortbread liquorice dragée macaroon.'
|
|
</script>
|
|
|
|
<template>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
grow
|
|
>
|
|
<VTab
|
|
v-for="item in items"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ item }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VWindow
|
|
v-model="currentTab"
|
|
class="mt-6"
|
|
>
|
|
<VWindowItem
|
|
v-for="item in items"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</template>
|
|
` }
|
|
|
|
export const pagination = { ts: `<template>
|
|
<VTabs show-arrows>
|
|
<VTab
|
|
v-for="i in 10"
|
|
:key="i"
|
|
:value="i"
|
|
>
|
|
Item {{ i }}
|
|
</VTab>
|
|
</VTabs>
|
|
</template>
|
|
`, js: `<template>
|
|
<VTabs show-arrows>
|
|
<VTab
|
|
v-for="i in 10"
|
|
:key="i"
|
|
:value="i"
|
|
>
|
|
Item {{ i }}
|
|
</VTab>
|
|
</VTabs>
|
|
</template>
|
|
` }
|
|
|
|
export const programmaticNavigation = { ts: `<script lang="ts" 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>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
grow
|
|
>
|
|
<VTab
|
|
v-for="item in items.length"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ items[item - 1] }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VWindow
|
|
v-model="currentTab"
|
|
class="mt-5"
|
|
>
|
|
<VWindowItem
|
|
v-for="item in items.length"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
|
|
<div class="text-center">
|
|
<VBtn
|
|
variant="text"
|
|
:disabled="currentTab === 1"
|
|
@click="preTab"
|
|
>
|
|
Previous
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
:disabled="currentTab === totalTabs"
|
|
@click="nextTab"
|
|
>
|
|
Next
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<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>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
grow
|
|
>
|
|
<VTab
|
|
v-for="item in items.length"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ items[item - 1] }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VWindow
|
|
v-model="currentTab"
|
|
class="mt-5"
|
|
>
|
|
<VWindowItem
|
|
v-for="item in items.length"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
|
|
<div class="text-center">
|
|
<VBtn
|
|
variant="text"
|
|
:disabled="currentTab === 1"
|
|
@click="preTab"
|
|
>
|
|
Previous
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
:disabled="currentTab === totalTabs"
|
|
@click="nextTab"
|
|
>
|
|
Next
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const stacked = { ts: `<script lang="ts" 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>
|
|
`, js: `<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>
|
|
` }
|
|
|
|
export const vertical = { ts: `<script setup lang="ts">
|
|
const currentTab = ref(0)
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
sm="4"
|
|
>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
direction="vertical"
|
|
>
|
|
<VTab prepend-icon="ri-user-line">
|
|
Option 1
|
|
</VTab>
|
|
|
|
<VTab prepend-icon="ri-lock-line">
|
|
Option 2
|
|
</VTab>
|
|
|
|
<VTab prepend-icon="ri-rfid-line">
|
|
Option 3
|
|
</VTab>
|
|
</VTabs>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
sm="8"
|
|
>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem>
|
|
<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, semper nec, quam. Phasellus blandit leo ut odio.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem>
|
|
<p>
|
|
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, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.
|
|
</p>
|
|
|
|
<p class="mb-0">
|
|
Donec venenatis vulputate lorem. Aenean viverra rhoncus pede. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem>
|
|
<p>
|
|
Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
|
|
</p>
|
|
|
|
<p class="mb-0">
|
|
Cras sagittis. Phasellus nec sem in justo pellentesque facilisis. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nam at tortor in tellus interdum sagittis.
|
|
</p>
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const currentTab = ref(0)
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
sm="4"
|
|
>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
direction="vertical"
|
|
>
|
|
<VTab prepend-icon="ri-user-line">
|
|
Option 1
|
|
</VTab>
|
|
|
|
<VTab prepend-icon="ri-lock-line">
|
|
Option 2
|
|
</VTab>
|
|
|
|
<VTab prepend-icon="ri-rfid-line">
|
|
Option 3
|
|
</VTab>
|
|
</VTabs>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
sm="8"
|
|
>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem>
|
|
<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, semper nec, quam. Phasellus blandit leo ut odio.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem>
|
|
<p>
|
|
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, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.
|
|
</p>
|
|
|
|
<p class="mb-0">
|
|
Donec venenatis vulputate lorem. Aenean viverra rhoncus pede. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem>
|
|
<p>
|
|
Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
|
|
</p>
|
|
|
|
<p class="mb-0">
|
|
Cras sagittis. Phasellus nec sem in justo pellentesque facilisis. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nam at tortor in tellus interdum sagittis.
|
|
</p>
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
` }
|
|
|
|
export const verticalPill = { ts: `<script setup lang="ts">
|
|
const currentTab = ref(0)
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
sm="4"
|
|
>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
direction="vertical"
|
|
class="v-tabs-pill"
|
|
>
|
|
<VTab prepend-icon="ri-user-line">
|
|
Option 1
|
|
</VTab>
|
|
|
|
<VTab prepend-icon="ri-lock-line">
|
|
Option 2
|
|
</VTab>
|
|
|
|
<VTab prepend-icon="ri-rfid-line">
|
|
Option 3
|
|
</VTab>
|
|
</VTabs>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
sm="8"
|
|
>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem>
|
|
<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, semper nec, quam. Phasellus blandit leo ut odio.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem>
|
|
<p>
|
|
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, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.
|
|
</p>
|
|
|
|
<p class="mb-0">
|
|
Donec venenatis vulputate lorem. Aenean viverra rhoncus pede. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem>
|
|
<p>
|
|
Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
|
|
</p>
|
|
|
|
<p class="mb-0">
|
|
Cras sagittis. Phasellus nec sem in justo pellentesque facilisis. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nam at tortor in tellus interdum sagittis.
|
|
</p>
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const currentTab = ref(0)
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
sm="4"
|
|
>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
direction="vertical"
|
|
class="v-tabs-pill"
|
|
>
|
|
<VTab prepend-icon="ri-user-line">
|
|
Option 1
|
|
</VTab>
|
|
|
|
<VTab prepend-icon="ri-lock-line">
|
|
Option 2
|
|
</VTab>
|
|
|
|
<VTab prepend-icon="ri-rfid-line">
|
|
Option 3
|
|
</VTab>
|
|
</VTabs>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
sm="8"
|
|
>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem>
|
|
<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, semper nec, quam. Phasellus blandit leo ut odio.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem>
|
|
<p>
|
|
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, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.
|
|
</p>
|
|
|
|
<p class="mb-0">
|
|
Donec venenatis vulputate lorem. Aenean viverra rhoncus pede. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem>
|
|
<p>
|
|
Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
|
|
</p>
|
|
|
|
<p class="mb-0">
|
|
Cras sagittis. Phasellus nec sem in justo pellentesque facilisis. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nam at tortor in tellus interdum sagittis.
|
|
</p>
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
` }
|
|
|