1044 lines
24 KiB
JavaScript
1044 lines
24 KiB
JavaScript
export const alignment = { ts: `<template>
|
|
<VCard>
|
|
<VCardText class="d-flex flex-column gap-4">
|
|
<!-- Default -->
|
|
<div>
|
|
<VTabs>
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
</div>
|
|
|
|
<!-- Center -->
|
|
<div>
|
|
<VTabs align-tabs="center">
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
</div>
|
|
|
|
<!-- End -->
|
|
<div>
|
|
<VTabs align-tabs="end">
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
`, js: `<template>
|
|
<VCard>
|
|
<VCardText class="d-flex flex-column gap-4">
|
|
<!-- Default -->
|
|
<div>
|
|
<VTabs>
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
</div>
|
|
|
|
<!-- Center -->
|
|
<div>
|
|
<VTabs align-tabs="center">
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
</div>
|
|
|
|
<!-- End -->
|
|
<div>
|
|
<VTabs align-tabs="end">
|
|
<VTab>Home</VTab>
|
|
<VTab>Service</VTab>
|
|
<VTab>Account</VTab>
|
|
</VTabs>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
` }
|
|
|
|
export const basic = { ts: `<script lang="ts" setup>
|
|
const currentTab = ref('item-1')
|
|
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>
|
|
<VCard>
|
|
<VTabs v-model="currentTab">
|
|
<VTab>Tab One</VTab>
|
|
<VTab>Tab Two</VTab>
|
|
<VTab>Tab Three</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="item in 3"
|
|
:key="item"
|
|
:value="\`item-\${item}\`"
|
|
>
|
|
{{ tabItemContent }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const currentTab = ref('item-1')
|
|
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>
|
|
<VCard>
|
|
<VTabs v-model="currentTab">
|
|
<VTab>Tab One</VTab>
|
|
<VTab>Tab Two</VTab>
|
|
<VTab>Tab Three</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="item in 3"
|
|
:key="item"
|
|
:value="\`item-\${item}\`"
|
|
>
|
|
{{ tabItemContent }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
` }
|
|
|
|
export const basicPill = { ts: `<script lang="ts" setup>
|
|
const currentTab = ref('window1')
|
|
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>
|
|
|
|
<VCard class="mt-5">
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="item in 3"
|
|
:key="\`window\${item}\`"
|
|
>
|
|
{{ tabItemContent }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const currentTab = ref('window1')
|
|
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>
|
|
|
|
<VCard class="mt-5">
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="item in 3"
|
|
:key="\`window\${item}\`"
|
|
>
|
|
{{ tabItemContent }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
` }
|
|
|
|
export const customIcons = { ts: `<script setup lang="ts">
|
|
const currentTab = ref(0)
|
|
const tabItemText = 'hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer.'
|
|
</script>
|
|
|
|
<template>
|
|
<VCard>
|
|
<VTabs
|
|
next-icon="tabler-arrow-right"
|
|
prev-icon="tabler-arrow-left"
|
|
>
|
|
<VTab
|
|
v-for="i in 10"
|
|
:key="i"
|
|
>
|
|
Item {{ i }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="i in 10"
|
|
:key="i"
|
|
:value="i"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const currentTab = ref(0)
|
|
const tabItemText = 'hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer.'
|
|
</script>
|
|
|
|
<template>
|
|
<VCard>
|
|
<VTabs
|
|
next-icon="tabler-arrow-right"
|
|
prev-icon="tabler-arrow-left"
|
|
>
|
|
<VTab
|
|
v-for="i in 10"
|
|
:key="i"
|
|
>
|
|
Item {{ i }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="i in 10"
|
|
:key="i"
|
|
:value="i"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</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>
|
|
<VCard>
|
|
<VTabs v-model="currentTab">
|
|
<VTab
|
|
v-for="n in totalTabs"
|
|
:key="n"
|
|
:value="n"
|
|
>
|
|
Tab {{ n }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<!-- buttons -->
|
|
<VCardText class="text-center d-flex items-center gap-y-2 flex-wrap">
|
|
<VBtn
|
|
:disabled="!totalTabs"
|
|
class="me-4"
|
|
:variant="!totalTabs ? 'tonal' : undefined"
|
|
@click="totalTabs--"
|
|
>
|
|
Remove Tab
|
|
</VBtn>
|
|
|
|
<VBtn @click="totalTabs++">
|
|
Add Tab
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const totalTabs = ref(3)
|
|
const currentTab = ref(0)
|
|
|
|
watch(totalTabs, newValue => {
|
|
currentTab.value = newValue - 1
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<VCard>
|
|
<VTabs v-model="currentTab">
|
|
<VTab
|
|
v-for="n in totalTabs"
|
|
:key="n"
|
|
:value="n"
|
|
>
|
|
Tab {{ n }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<!-- buttons -->
|
|
<VCardText class="text-center d-flex items-center gap-y-2 flex-wrap">
|
|
<VBtn
|
|
:disabled="!totalTabs"
|
|
class="me-4"
|
|
:variant="!totalTabs ? 'tonal' : undefined"
|
|
@click="totalTabs--"
|
|
>
|
|
Remove Tab
|
|
</VBtn>
|
|
|
|
<VBtn @click="totalTabs++">
|
|
Add Tab
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
` }
|
|
|
|
export const fixed = { ts: `<script lang="ts" setup>
|
|
const currentTab = ref('Appetizers')
|
|
const items = ['Fixed Tab 1', 'Fixed Tab 2', 'Fixed Tab 3', 'Fixed Tab 4']
|
|
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>
|
|
<VCard>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
fixed-tabs
|
|
>
|
|
<VTab
|
|
v-for="item in items"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ item }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="item in items"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const currentTab = ref('Appetizers')
|
|
|
|
const items = [
|
|
'Fixed Tab 1',
|
|
'Fixed Tab 2',
|
|
'Fixed Tab 3',
|
|
'Fixed Tab 4',
|
|
]
|
|
|
|
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>
|
|
<VCard>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
fixed-tabs
|
|
>
|
|
<VTab
|
|
v-for="item in items"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ item }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="item in items"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</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>
|
|
<VCard>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
grow
|
|
>
|
|
<VTab
|
|
v-for="item in items"
|
|
:key="item"
|
|
>
|
|
{{ item }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="item in items"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</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>
|
|
<VCard>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
grow
|
|
>
|
|
<VTab
|
|
v-for="item in items"
|
|
:key="item"
|
|
>
|
|
{{ item }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="item in items"
|
|
:key="item"
|
|
:value="item"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
` }
|
|
|
|
export const pagination = { ts: `<script setup lang="ts">
|
|
const currentTab = ref('item1')
|
|
const tabItemText = 'hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer.'
|
|
</script>
|
|
|
|
<template>
|
|
<VCard>
|
|
<VTabs v-model="currentTab">
|
|
<VTab
|
|
v-for="i in 10"
|
|
:key="i"
|
|
>
|
|
Item {{ i }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="i in 10"
|
|
:key="i"
|
|
:value="\`item\${i}\`"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const currentTab = ref('item1')
|
|
const tabItemText = 'hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer.'
|
|
</script>
|
|
|
|
<template>
|
|
<VCard>
|
|
<VTabs v-model="currentTab">
|
|
<VTab
|
|
v-for="i in 10"
|
|
:key="i"
|
|
>
|
|
Item {{ i }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="i in 10"
|
|
:key="i"
|
|
:value="\`item\${i}\`"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</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>
|
|
<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>
|
|
`, 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>
|
|
<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>
|
|
` }
|
|
|
|
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>
|
|
<VCard>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
grow
|
|
stacked
|
|
>
|
|
<VTab>
|
|
<VIcon
|
|
icon="tabler-phone"
|
|
class="mb-2"
|
|
/>
|
|
<span>Recent</span>
|
|
</VTab>
|
|
|
|
<VTab>
|
|
<VIcon
|
|
icon="tabler-heart"
|
|
class="mb-2"
|
|
/>
|
|
<span>Favorites</span>
|
|
</VTab>
|
|
|
|
<VTab>
|
|
<VIcon
|
|
icon="tabler-user"
|
|
class="mb-2"
|
|
/>
|
|
<span>Nearby</span>
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="i in 3"
|
|
:key="i"
|
|
:value="\`tab-\${i}\`"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</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>
|
|
<VCard>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
grow
|
|
stacked
|
|
>
|
|
<VTab>
|
|
<VIcon
|
|
icon="tabler-phone"
|
|
class="mb-2"
|
|
/>
|
|
<span>Recent</span>
|
|
</VTab>
|
|
|
|
<VTab>
|
|
<VIcon
|
|
icon="tabler-heart"
|
|
class="mb-2"
|
|
/>
|
|
<span>Favorites</span>
|
|
</VTab>
|
|
|
|
<VTab>
|
|
<VIcon
|
|
icon="tabler-user"
|
|
class="mb-2"
|
|
/>
|
|
<span>Nearby</span>
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem
|
|
v-for="i in 3"
|
|
:key="i"
|
|
:value="\`tab-\${i}\`"
|
|
>
|
|
{{ tabItemText }}
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
` }
|
|
|
|
export const vertical = { ts: `<script setup lang="ts">
|
|
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>
|
|
`, js: `<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>
|
|
` }
|
|
|
|
export const verticalPill = { ts: `<script setup lang="ts">
|
|
const currentTab = ref('window-1')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="d-flex gap-6">
|
|
<div>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
direction="vertical"
|
|
class="v-tabs-pill"
|
|
>
|
|
<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>
|
|
|
|
<VCard>
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem value="window-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.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem value="window-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, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem value="window-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, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
|
|
</p>
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const currentTab = ref('window-1')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="d-flex gap-6">
|
|
<div>
|
|
<VTabs
|
|
v-model="currentTab"
|
|
direction="vertical"
|
|
class="v-tabs-pill"
|
|
>
|
|
<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>
|
|
|
|
<VCard>
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem value="window-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.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem value="window-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, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.
|
|
</p>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem value="window-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, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
|
|
</p>
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|