Initial commit
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
<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>
|
||||
26
resources/js/views/demos/components/tabs/DemoTabsBasic.vue
Normal file
26
resources/js/views/demos/components/tabs/DemoTabsBasic.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<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>
|
||||
@@ -0,0 +1,28 @@
|
||||
<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>
|
||||
@@ -0,0 +1,32 @@
|
||||
<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>
|
||||
38
resources/js/views/demos/components/tabs/DemoTabsDynamic.vue
Normal file
38
resources/js/views/demos/components/tabs/DemoTabsDynamic.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<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>
|
||||
41
resources/js/views/demos/components/tabs/DemoTabsFixed.vue
Normal file
41
resources/js/views/demos/components/tabs/DemoTabsFixed.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<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>
|
||||
40
resources/js/views/demos/components/tabs/DemoTabsGrow.vue
Normal file
40
resources/js/views/demos/components/tabs/DemoTabsGrow.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<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>
|
||||
@@ -0,0 +1,29 @@
|
||||
<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>
|
||||
@@ -0,0 +1,68 @@
|
||||
<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>
|
||||
50
resources/js/views/demos/components/tabs/DemoTabsStacked.vue
Normal file
50
resources/js/views/demos/components/tabs/DemoTabsStacked.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<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>
|
||||
@@ -0,0 +1,69 @@
|
||||
<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>
|
||||
@@ -0,0 +1,67 @@
|
||||
<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>
|
||||
1043
resources/js/views/demos/components/tabs/demoCodeTabs.js
Normal file
1043
resources/js/views/demos/components/tabs/demoCodeTabs.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user