1import{a as u,V}from"./VTabs-B63S1epy.js";import{r as C,o as c,c as b,d as i,b as e,e as a,aa as q,t as n,m as d,aM as m,F as p,h as v,v as w,w as A,f as T,a3 as h}from"./index-BJiotQ1y.js";import{V as I}from"./VCardText-Ds77CzhY.js";import{V as W,a as f}from"./VWindowItem-D3IP5_Wu.js";import{V as _}from"./VCard-ImMJge73.js";import{_ as O}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{_ as U}from"./AppCardCode-CcXt1CXD.js";import{V as N}from"./VRow-BaWP5n9q.js";import{V as k}from"./VCol-Bwtue8I5.js";import"./forwardRefs-C-GTDzx5.js";import"./easing-CjukEv2V.js";import"./VSlideGroup-Bo6MUhyT.js";import"./scopeId-CzFWNpQy.js";import"./lazy-CecdQcFC.js";import"./ssrBoot-v-CZL_SA.js";import"./VImg-CEdg-vTA.js";import"./VAvatar-Bj_eSgFO.js";import"./vue3-perfect-scrollbar-C2zm10Dz.js";import"./VDivider-niEB_qmK.js";/* empty css */const M={class:"d-flex gap-6"},E={__name:"DemoTabsVerticalPill",setup(g){const t=C("window-1");return(s,l)=>(c(),b("div",M,[i("div",null,[e(V,{modelValue:d(t),"onUpdate:modelValue":l[0]||(l[0]=o=>m(t)?t.value=o:null),direction:"vertical",class:"v-tabs-pill"},{default:a(()=>[e(u,null,{default:a(()=>[e(q,{start:"",icon:"tabler-user"}),l[2]||(l[2]=n(" Option 1 "))]),_:1}),e(u,null,{default:a(()=>[e(q,{start:"",icon:"tabler-lock"}),l[3]||(l[3]=n(" Option 2 "))]),_:1}),e(u,null,{default:a(()=>[e(q,{start:"",icon:"tabler-access-point"}),l[4]||(l[4]=n(" Option 3 "))]),_:1})]),_:1},8,["modelValue"])]),e(_,null,{default:a(()=>[e(I,null,{default:a(()=>[e(W,{modelValue:d(t),"onUpdate:modelValue":l[1]||(l[1]=o=>m(t)?t.value=o:null)},{default:a(()=>[e(f,{value:"window-1"},{default:a(()=>l[5]||(l[5]=[i("p",null," Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero. ",-1),i("p",{class:"mb-0"}," Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et. ",-1)])),_:1}),e(f,{value:"window-2"},{default:a(()=>l[6]||(l[6]=[i("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. ",-1)])),_:1}),e(f,{value:"window-3"},{default:a(()=>l[7]||(l[7]=[i("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. ",-1)])),_:1})]),_:1},8,["modelValue"])]),_:1})]),_:1})]))}},G="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.",H={__name:"DemoTabsBasicPill",setup(g){const t=C("window1");return(s,l)=>(c(),b(p,null,[e(V,{modelValue:d(t),"onUpdate:modelValue":l[0]||(l[0]=o=>m(t)?t.value=o:null),class:"v-tabs-pill"},{default:a(()=>[e(u,null,{default:a(()=>l[2]||(l[2]=[n("Tab One")])),_:1}),e(u,null,{default:a(()=>l[3]||(l[3]=[n("Tab Two")])),_:1}),e(u,null,{default:a(()=>l[4]||(l[4]=[n("Tab Three")])),_:1})]),_:1},8,["modelValue"]),e(_,{class:"mt-5"},{default:a(()=>[e(I,null,{default:a(()=>[e(W,{modelValue:d(t),"onUpdate:modelValue":l[1]||(l[1]=o=>m(t)?t.value=o:null)},{default:a(()=>[(c(),b(p,null,v(3,o=>e(f,{key:`window${o}`},{default:a(()=>[n(w(G))]),_:2},1024)),64))]),_:1},8,["modelValue"])]),_:1})]),_:1})],64))}},R={__name:"DemoTabsDynamic",setup(g){const t=C(3),s=C(0);return A(t,l=>{s.value=l-1}),(l,o)=>(c(),T(_,null,{default:a(()=>[e(V,{modelValue:d(s),"onUpdate:modelValue":o[0]||(o[0]=r=>m(s)?s.value=r:null)},{default:a(()=>[(c(!0),b(p,null,v(d(t),r=>(c(),T(u,{key:r,value:r},{default:a(()=>[n(" Tab "+w(r),1)]),_:2},1032,["value"]))),128))]),_:1}
1,8,["modelValue"]),e(I,{class:"text-center d-flex items-center gap-y-2 flex-wrap"},{default:a(()=>[e(h,{disabled:!d(t),class:"me-4",variant:d(t)?void 0:"tonal",onClick:o[1]||(o[1]=r=>t.value--)},{default:a(()=>o[3]||(o[3]=[n(" Remove Tab ")])),_:1},8,["disabled","variant"]),e(h,{onClick:o[2]||(o[2]=r=>t.value++)},{default:a(()=>o[4]||(o[4]=[n(" Add Tab ")])),_:1})]),_:1})]),_:1}))}},L={class:"d-flex justify-center gap-4 mt-3"},J="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.",K={__name:"DemoTabsProgrammaticNavigation",setup(g){const t=C(1),s=["Appetizers","Entrees","Deserts","Cocktails"],l=s.length,o=()=>{t.value!==1&&(t.value-=1)},r=()=>{t.value!==l&&(t.value+=1)};return(P,y)=>(c(),T(_,null,{default:a(()=>[e(V,{modelValue:d(t),"onUpdate:modelValue":y[0]||(y[0]=x=>m(t)?t.value=x:null),grow:""},{default:a(()=>[(c(!0),b(p,null,v(s.length,x=>(c(),T(u,{key:x,value:x},{default:a(()=>[n(w(s[x-1]),1)]),_:2},1032,["value"]))),128))]),_:1},8,["modelValue"]),e(I,null,{default:a(()=>[e(W,{modelValue:d(t),"onUpdate:modelValue":y[1]||(y[1]=x=>m(t)?t.value=x:null)},{default:a(()=>[(c(!0),b(p,null,v(s.length,x=>(c(),T(f,{key:x,value:x},{default:a(()=>[n(w(J))]),_:2},1032,["value"]))),128))]),_:1},8,["modelValue"]),i("div",L,[e(h,{disabled:d(t)===1,onClick:o},{default:a(()=>y[2]||(y[2]=[n(" Previous ")])),_:1},8,["disabled"]),e(h,{disabled:d(t)===d(l),onClick:r},{default:a(()=>y[3]||(y[3]=[n(" Next ")])),_:1},8,["disabled"])])]),_:1})]),_:1}))}},Q="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.",X={__name:"DemoTabsGrow",setup(g){const t=C("Appetizers"),s=["Appetizers","Entrees","Deserts","Cocktails"];return(l,o)=>(c(),T(_,null,{default:a(()=>[e(V,{modelValue:d(t),"onUpdate:modelValue":o[0]||(o[0]=r=>m(t)?t.value=r:null),grow:""},{default:a(()=>[(c(),b(p,null,v(s,r=>e(u,{key:r},{default:a(()=>[n(w(r),1)]),_:2},1024)),64))]),_:1},8,["modelValue"]),e(I,null,{default:a(()=>[e(W,{modelValue:d(t),"onUpdate:modelValue":o[1]||(o[1]=r=>m(t)?t.value=r:null)},{default:a(()=>[(c(),b(p,null,v(s,r=>e(f,{key:r,value:r},{default:a(()=>[n(w(Q))]),_:2},1032,["value"])),64))]),_:1},8,["modelValue"])]),_:1})]),_:1}))}},Y="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.",Z={__name:"DemoTabsFixed",setup(g){const t=C("Appetizers"),s=["Fixed Tab 1","Fixed Tab 2","Fixed Tab 3","Fixed Tab 4"];return(l,o)=>(c(),T(_,null,{default:a(()=>[e(V,{modelValue:d(t),"onUpdate:modelValue":o[0]||(o[0]=r=>m(t)?t.value=r:null),"fixed-tabs":""},{default:a(()=>[(c(),b(p,null,v(s,r=>e(u,{key:r,value:r},{default:a(()=>[n(w(r),1)]),_:2},1032,["value"])),64))]),_:1},8,["modelValue"]),e(I,null,{default:a(()=>[e(W,{modelValue:d(t),"onUpdate:modelValue":o[1]||(o[1]=r=>m(t)?t.value=r:null)},{default:a(()=>[(c(),b(p,null,v(s,r=>e(f,{key:r,value:r},{default:a(()=>[n(w(Y))]),_:2},1032,["value"])),64))]),_:1},8,["modelValue"])]),_:1})]),_:1}))}},ee="hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer.",ae={__name:"DemoTabsCustomIcons",setup(g){const t=C(0);return(s,l)=>(c(),T(_,null,{default:a(()=>[e(V,{"next-icon":"tabler-arrow-right","prev-icon":"tabler-arrow-left"},{default:a(()=>[(c(),b(p,null,v(10,o=>e(u,{key:o},{default:a(()=>[n(" Item "+w(o),1)]),_:2},1024)),64))]),_:1}),e(I,null,{default:a(()=>[e(W,{modelValue:d(t),"onUpdate:modelValue":l[0]||(l[0]=o=>m(t)?t.value=o:null)},{default:a(()=>[(c(),b(p,null,v(10,o=>e(f,{key:o,value:o},{default:a(()=>[n(w(ee))]),_:2},1032,["value"])),64))]),_:1},8,["modelValue"])]),_:1})]),_:1}))}},te="hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer.",le={__name:"DemoTabsPagination",setup(g){const t=C("item1");return(s,l)=>(c(),T(_,null,{default:a(()=>[e(V,{modelValue:d(t),"onUpdate:modelValue":l[0]||(l[0]=o=>m(t)?t.value=o:null)},{default:a(()=>[(c(),b(p,null,v(10,o=>e(u,{key:o},{default:a(()=>[n(" Item "+w(o),1)]),_:2},1024)),64))]),_:1},8,["modelValue"]),e(I,null,{default:a(()=>[e(W,{modelValue:d(t),"onUpdate:modelValue":l[1]||(l[1]=o=>m(t)?t.value=o:null)},{default:a(()=>[(c(),b(p,null,v(10,o=>e(f,{key:o,value:`item${o}`},{default:a(()=>[n(w(te))]),_:2},1032,["value"])),64))]),_:1},8,["modelValue"])]),_:1})]),_:1}))}},oe={};function ne(g,t){return c(),T(_,null,{default:a(()=>[e(I,{class:"d-flex flex-column gap-4"},{default:a(()=>[i("div",null,[e(V,null,{default:a(()=>[e(u,null,{default:a(()=>t[0]||(t[0]=[n("Home")])),_:1}),e(u,null,{default:a(()=>t[1]||(t[1]=[n("Service")])),_:1}),e(u,null,{default:a(()=>t[2]||(t[2]=[n("Account")])),_:1})]),_:1})]),i("div",null,[e(V,{"align-tabs":"center"},{default:a(()=>[e(u,null,{default:a(()=>t[3]||(t[3]=[n("Home")])),_:1}),e(u,null,{default:a(()=>t[4]||(t[4]=[n("Service")])),_:1}),e(u,null,{default:a(()=>t[5]||(t[5]=[n("Account")])),_:1})]),_:1})]),i("div",null,[e(V,{"align-tabs":"end"},{default:a(()=>[e(u,null,{default:a(()=>t[6]||(t[6]=[n("Home")])),_:1}),e(u,null,{default:a(()=>t[7]||(t[7]=[n("Service")])),_:1}),e(u,null,{default:a(()=>t[8]||(t[8]=[n("Account")])),_:1})]),_:1})])]),_:1})]),_:1})}const se=O(oe,[["render",ne]]),ie={class:"d-flex"},re={__name:"DemoTabsVertical",setup(g){const t=C("tab-1");return(s,l)=>(c(),T(_,null,{default:a(()=>[i("div",ie,[i("div",null,[e(V,{modelValue:d(t),"onUpdate:modelValue":l[0]||(l[0]=o=>m(t)?t.value=o:null),direction:"vertical"},{default:a(()=>[e(u,null,{default:a(()=>[e(q,{start:"",icon:"tabler-user"}),l[2]||(l[2]=n(" Option 1 "))]),_:1}),e(u,null,{default:a(()=>[e(q,{start:"",icon:"tabler-lock"}),l[3]||(l[3]=n(" Option 2 "))]),_:1}),e(u,null,{default:a(()=>[e(q,{start:"",icon:"tabler-access-point"}),l[4]||(l[4]=n(" Option 3 "))]),_:1})]),_:1},8,["modelValue"])]),e(I,null,{default:a(()=>[e(W,{modelValue:d(t),"onUpdate:modelValue":l[1]||(l[1]=o=>m(t)?t.value=o:null),class:"ms-3"},{default:a(()=>[e(f,{value:"tab-1"},{default:a(()=>l[5]||(l[5]=[i("p",null," Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero. ",-1),i("p",{class:"mb-0"}," Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et, tincidunt eget. ",-1)])),_:1}),e(f,{value:"tab-2"},{default:a(()=>l[6]||(l[6]=[i("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. ",-1)])),_:1}),e(f,{value:"tab-3"},{default:a(()=>
1l[7]||(l[7]=[i("p",{class:"mb-0"}," Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper. ",-1)])),_:1})]),_:1},8,["modelValue"])]),_:1})])]),_:1}))}},ue="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.",ce={__name:"DemoTabsStacked",setup(g){const t=C("tab-1");return(s,l)=>(c(),T(_,null,{default:a(()=>[e(V,{modelValue:d(t),"onUpdate:modelValue":l[0]||(l[0]=o=>m(t)?t.value=o:null),grow:"",stacked:""},{default:a(()=>[e(u,null,{default:a(()=>[e(q,{icon:"tabler-phone",class:"mb-2"}),l[2]||(l[2]=i("span",null,"Recent",-1))]),_:1}),e(u,null,{default:a(()=>[e(q,{icon:"tabler-heart",class:"mb-2"}),l[3]||(l[3]=i("span",null,"Favorites",-1))]),_:1}),e(u,null,{default:a(()=>[e(q,{icon:"tabler-user",class:"mb-2"}),l[4]||(l[4]=i("span",null,"Nearby",-1))]),_:1})]),_:1},8,["modelValue"]),e(I,null,{default:a(()=>[e(W,{modelValue:d(t),"onUpdate:modelValue":l[1]||(l[1]=o=>m(t)?t.value=o:null)},{default:a(()=>[(c(),b(p,null,v(3,o=>e(f,{key:o,value:`tab-${o}`},{default:a(()=>[n(w(ue))]),_:2},1032,["value"])),64))]),_:1},8,["modelValue"])]),_:1})]),_:1}))}},de="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.",me={__name:"DemoTabsBasic",setup(g){const t=C("item-1");return(s,l)=>(c(),T(_,null,{default:a(()=>[e(V,{modelValue:d(t),"onUpdate:modelValue":l[0]||(l[0]=o=>m(t)?t.value=o:null)},{default:a(()=>[e(u,null,{default:a(()=>l[2]||(l[2]=[n("Tab One")])),_:1}),e(u,null,{default:a(()=>l[3]||(l[3]=[n("Tab Two")])),_:1}),e(u,null,{default:a(()=>l[4]||(l[4]=[n("Tab Three")])),_:1})]),_:1},8,["modelValue"]),e(I,null,{default:a(()=>[e(W,{modelValue:d(t),"onUpdate:modelValue":l[1]||(l[1]=o=>m(t)?t.value=o:null)},{default:a(()=>[(c(),b(p,null,v(3,o=>e(f,{key:o,value:`item-${o}`},{default:a(()=>[n(w(de))]),_:2},1032,["value"])),64))]),_:1},8,["modelValue"])]),_:1})]),_:1}))}},be={ts:`<template> 2 <VCard> 3 <VCardText class="d-flex flex-column gap-4"> 4 <!-- Default --> 5 <div> 6 <VTabs> 7 <VTab>Home</VTab> 8 <VTab>Service</VTab> 9 <VTab>Account</VTab> 10 </VTabs> 11 </div> 12 13 <!-- Center --> 14 <div> 15 <VTabs align-tabs="center"> 16 <VTab>Home</VTab> 17 <VTab>Service</VTab> 18 <VTab>Account</VTab> 19 </VTabs> 20 </div> 21 22 <!-- End --> 23 <div> 24 <VTabs align-tabs="end"> 25 <VTab>Home</VTab> 26 <VTab>Service</VTab> 27 <VTab>Account</VTab> 28 </VTabs> 29 </div> 30 </VCardText> 31 </VCard> 32</template> 33`,js:`<template> 34 <VCard> 35 <VCardText class="d-flex flex-column gap-4"> 36 <!-- Default --> 37 <div> 38 <VTabs> 39 <VTab>Home</VTab> 40 <VTab>Service</VTab> 41 <VTab>Account</VTab> 42 </VTabs> 43 </div> 44 45 <!-- Center --> 46 <div> 47 <VTabs align-tabs="center"> 48 <VTab>Home</VTab> 49 <VTab>Service</VTab> 50 <VTab>Account</VTab> 51 </VTabs> 52 </div> 53 54 <!-- End --> 55 <div> 56 <VTabs align-tabs="end"> 57 <VTab>Home</VTab> 58 <VTab>Service</VTab> 59 <VTab>Account</VTab> 60 </VTabs> 61 </div> 62 </VCardText> 63 </VCard> 64</template> 65`},pe={ts:`<script lang="ts" setup> 66const currentTab = ref('item-1') 67const 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.' 68<\/script> 69 70<template> 71 <VCard> 72 <VTabs v-model="currentTab"> 73 <VTab>Tab One</VTab> 74 <VTab>Tab Two</VTab> 75 <VTab>Tab Three</VTab> 76 </VTabs> 77 78 <VCardText> 79 <VWindow v-model="currentTab"> 80 <VWindowItem 81 v-for="item in 3" 82 :key="item" 83 :value="\`item-\${item}\`" 84 > 85 {{ tabItemContent }} 86 </VWindowItem> 87 </VWindow> 88 </VCardText> 89 </VCard> 90</template> 91`,js:`<script setup> 92const currentTab = ref('item-1') 93const 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.' 94<\/script> 95 96<template> 97 <VCard> 98 <VTabs v-model="currentTab"> 99 <VTab>Tab One</VTab> 100 <VTab>Tab Two</VTab> 101 <VTab>Tab Three</VTab> 102 </VTabs> 103 104 <VCardText> 105 <VWindow v-model="currentTab"> 106 <VWindowItem 107 v-for="item in 3" 108 :key="item" 109 :value="\`item-\${item}\`" 110 > 111 {{ tabItemContent }} 112 </VWindowItem> 113 </VWindow> 114 </VCardText> 115 </VCard> 116</template> 117`},Ve={ts:`<script lang="ts" setup> 118const currentTab = ref('window1') 119const 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.' 120<\/script> 121 122<template> 123 <VTabs 124 v-model="currentTab" 125 class="v-tabs-pill" 126 > 127 <VTab>Tab One</VTab> 128 <VTab>Tab Two</VTab> 129 <VTab>Tab Three</VTab> 130 </VTabs> 131 132 <VCard class="mt-5"> 133 <VCardText> 134 <VWindow v-model="currentTab"> 135 <VWindowItem 136 v-for="item in 3" 137 :key="\`window\${item}\`" 138 > 139 {{ tabItemContent }} 140 </VWindowItem> 141 </VWindow> 142 </VCardText> 143 </VCard> 144</template> 145`,js:`<script setup> 146const currentTab = ref('window1') 147const 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.' 148<\/script> 149 150<template> 151 <VTabs 152 v-model="currentTab" 153 class="v-tabs-pill" 154 > 155 <VTab>Tab One</VTab> 156 <VTab>Tab Two</VTab> 157 <VTab>Tab Three</VTab> 158 </VTabs> 159 160 <VCard class="mt-5"> 161 <VCardText> 162 <VWindow v-model="currentTab"> 163 <VWindowItem 164 v-for="item in 3" 165 :key="\`window\${item}\`" 166 > 167 {{ tabItemContent }} 168 </VWindowItem> 169 </VWindow> 170 </VCardText> 171 </VCard> 172</template> 173`},Te={ts:`<script setup lang="ts"> 174const currentTab = ref(0) 175const tabItemText = 'hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer.' 176<\/script> 177 178<template> 179 <VCard> 180 <VTabs 181 next-icon="tabler-arrow-right" 182 prev-icon="tabler-arrow-left" 183 > 184 <VTab 185 v-for="i in 10" 186 :key="i" 187 > 188 Item {{ i }} 189 </VTab> 190 </VTabs> 191 192 <VCardText> 193 <VWindow v-model="currentTab"> 194 <VWindowItem 195 v-for="i in 10" 196 :key="i" 197 :value="i" 198 > 199 {{ tabItemText }} 200 </VWindowItem> 201 </VWindow> 202 </VCardText> 203 </VCard> 204</template> 205`,js:`<script setup> 206const currentTab = ref(0) 207const tabItemText = 'hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer.' 208<\/script> 209 210<template> 211 <VCard> 212 <VTabs 213 next-icon="tabler-arrow-right" 214 prev-icon="tabler-arrow-left" 215 > 216 <VTab 217 v-for="i in 10" 218 :key="i" 219 > 220 Item {{ i }} 221 </VTab> 222 </VTabs> 223 224 <VCardText> 225 <VWindow v-model="currentTab"> 226 <VWindowItem 227 v-for="i in 10" 228 :key="i" 229 :value="i" 230 > 231 {{ tabItemText }} 232 </VWindowItem> 233 </VWindow> 234 </VCardText> 235 </VCard> 236</template> 237`},fe={ts:`<script lang="ts" setup> 238const totalTabs = ref(3) 239const currentTab = ref(0) 240 241watch(totalTabs, newValue => { 242 currentTab.value = newValue - 1 243}) 244<\/script> 245 246<template> 247 <VCard> 248 <VTabs v-model="currentTab"> 249 <VTab 250 v-for="n in totalTabs" 251 :key="n" 252 :value="n" 253 > 254 Tab {{ n }} 255 </VTab> 256 </VTabs> 257 258 <!-- buttons --> 259 <VCardText class="text-center d-flex items-center gap-y-2 flex-wrap"> 260 <VBtn 261 :disabled="!totalTabs" 262 class="me-4" 263 :variant="!totalTabs ? 'tonal' : undefined" 264 @click="totalTabs--" 265 > 266 Remove Tab 267 </VBtn> 268 269 <VBtn @click="totalTabs++"> 270 Add Tab 271 </VBtn> 272 </VCardText> 273 </VCard> 274</template> 275`,js:`<script setup> 276const totalTabs = ref(3) 277const currentTab = ref(0) 278 279watch(totalTabs, newValue => { 280 currentTab.value = newValue - 1 281}) 282<\/script> 283 284<template> 285 <VCard> 286 <VTabs v-model="currentTab"> 287 <VTab 288 v-for="n in totalTabs" 289 :key="n" 290 :value="n" 291 > 292 Tab {{ n }} 293 </VTab> 294 </VTabs> 295 296 <!-- buttons --> 297 <VCardText class="text-center d-flex items-center gap-y-2 flex-wrap"> 298 <VBtn 299 :disabled="!totalTabs" 300 class="me-4" 301 :variant="!totalTabs ? 'tonal' : undefined" 302 @click="totalTabs--" 303 > 304 Remove Tab 305 </VBtn> 306 307 <VBtn @click="totalTabs++"> 308 Add Tab 309 </VBtn> 310 </VCardText> 311 </VCard> 312</template> 313`},ve={ts:`<script lang="ts" setup> 314const currentTab = ref('Appetizers') 315const items = ['Fixed Tab 1', 'Fixed Tab 2', 'Fixed Tab 3', 'Fixed Tab 4'] 316const 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.' 317<\/script> 318 319<template> 320 <VCard> 321 <VTabs 322 v-model="currentTab" 323 fixed-tabs 324 > 325 <VTab 326 v-for="item in items" 327 :key="item" 328 :value="item" 329 > 330 {{ item }} 331 </VTab> 332 </VTabs> 333 334 <VCardText> 335 <VWindow v-model="currentTab"> 336 <VWindowItem 337 v-for="item in items" 338 :key="item" 339 :value="item" 340 > 341 {{ tabItemText }} 342 </VWindowItem> 343 </VWindow> 344 </VCardText> 345 </VCard> 346</template> 347`,js:`<script setup> 348const currentTab = ref('Appetizers') 349 350const items = [ 351 'Fixed Tab 1', 352 'Fixed Tab 2', 353 'Fixed Tab 3', 354 'Fixed Tab 4', 355] 356 357const 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.' 358<\/script> 359 360<template> 361 <VCard> 362 <VTabs 363 v-model="currentTab" 364 fixed-tabs 365 > 366 <VTab 367 v-for="item in items" 368 :key="item" 369 :value="item" 370 > 371 {{ item }} 372 </VTab> 373 </VTabs> 374 375 <VCardText> 376 <VWindow v-model="currentTab"> 377 <VWindowItem 378 v-for="item in items" 379 :key="item" 380 :value="item" 381 > 382 {{ tabItemText }} 383 </VWindowItem> 384 </VWindow> 385 </VCardText> 386 </VCard> 387</template> 388`},we={ts:`<script lang="ts" setup> 389const currentTab = ref('Appetizers') 390const items = ['Appetizers', 'Entrees', 'Deserts', 'Cocktails'] 391const 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.' 392<\/script> 393 394<template> 395 <VCard> 396 <VTabs 397 v-model="currentTab" 398 grow 399 > 400 <VTab 401 v-for="item in items" 402 :key="item" 403 > 404 {{ item }} 405 </VTab> 406 </VTabs> 407 408 <VCardText> 409 <VWindow v-model="currentTab"> 410 <VWindowItem 411 v-for="item in items" 412 :key="item" 413 :value="item" 414 > 415 {{ tabItemText }} 416 </VWindowItem> 417 </VWindow> 418 </VCardText> 419 </VCard> 420</template> 421`,js:`<script setup> 422const currentTab = ref('Appetizers') 423 424const items = [ 425 'Appetizers', 426 'Entrees', 427 'Deserts', 428 'Cocktails', 429] 430 431const 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.' 432<\/script> 433 434<template> 435 <VCard> 436 <VTabs 437 v-model="currentTab" 438 grow 439 > 440 <VTab 441 v-for="item in items" 442 :key="item" 443 > 444 {{ item }} 445 </VTab> 446 </VTabs> 447 448 <VCardText> 449 <VWindow v-model="currentTab"> 450 <VWindowItem 451 v-for="item in items" 452 :key="item" 453 :value="item" 454 > 455 {{ tabItemText }} 456 </VWindowItem> 457 </VWindow> 458 </VCardText> 459 </VCard> 460</template> 461`},ge={ts:`<script setup lang="ts"> 462const currentTab = ref('item1') 463const tabItemText = 'hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer.' 464<\/script> 465 466<template> 467 <VCard> 468 <VTabs v-model="currentTab"> 469 <VTab 470 v-for="i in 10" 471 :key="i" 472 > 473 Item {{ i }} 474 </VTab> 475 </VTabs> 476 477 <VCardText> 478 <VWindow v-model="currentTab"> 479 <VWindowItem 480 v-for="i in 10" 481 :key="i" 482 :value="\`item\${i}\`" 483 > 484 {{ tabItemText }} 485 </VWindowItem> 486 </VWindow> 487 </VCardText> 488 </VCard> 489</template> 490`,js:`<script setup> 491const currentTab = ref('item1') 492const tabItemText = 'hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer.' 493<\/script> 494 495<template> 496 <VCard> 497 <VTabs v-model="currentTab"> 498 <VTab 499 v-for="i in 10" 500 :key="i" 501 > 502 Item {{ i }} 503 </VTab> 504 </VTabs> 505 506 <VCardText> 507 <VWindow v-model="currentTab"> 508 <VWindowItem 509 v-for="i in 10" 510 :key="i" 511 :value="\`item\${i}\`" 512 > 513 {{ tabItemText }} 514 </VWindowItem> 515 </VWindow> 516 </VCardText> 517 </VCard> 518</template> 519`},xe={ts:`<script lang="ts" setup> 520const currentTab = ref(1) 521const items = ['Appetizers', 'Entrees', 'Deserts', 'Cocktails'] 522const 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.' 523const totalTabs = items.length 524 525const preTab = () => { 526 if (currentTab.value !== 1) 527 currentTab.value -= 1 528} 529 530const nextTab = () => { 531 if (currentTab.value !== totalTabs) 532 currentTab.value += 1 533} 534<\/script> 535 536<template> 537 <VCard> 538 <VTabs 539 v-model="currentTab" 540 grow 541 > 542 <VTab 543 v-for="item in items.length" 544 :key="item" 545 :value="item" 546 > 547 {{ items[item - 1] }} 548 </VTab> 549 </VTabs> 550 551 <VCardText> 552 <VWindow v-model="currentTab"> 553 <VWindowItem 554 v-for="item in items.length" 555 :key="item" 556 :value="item" 557 > 558 {{ tabItemText }} 559 </VWindowItem> 560 </VWindow> 561 562 <div class="d-flex justify-center gap-4 mt-3"> 563 <VBtn 564 :disabled="currentTab === 1" 565 @click="preTab" 566 > 567 Previous 568 </VBtn> 569 570 <VBtn 571 :disabled="currentTab === totalTabs" 572 @click="nextTab" 573 > 574 Next 575 </VBtn> 576 </div> 577 </VCardText> 578 </VCard> 579</template> 580`,js:`<script setup> 581const currentTab = ref(1) 582 583const items = [ 584 'Appetizers', 585 'Entrees', 586 'Deserts', 587 'Cocktails', 588] 589 590const 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.' 591const totalTabs = items.length 592 593const preTab = () => { 594 if (currentTab.value !== 1) 595 currentTab.value -= 1 596} 597 598const nextTab = () => { 599 if (currentTab.value !== totalTabs) 600 currentTab.value += 1 601} 602<\/script> 603 604<template> 605 <VCard> 606 <VTabs 607 v-model="currentTab" 608 grow 609
609 > 610 <VTab 611 v-for="item in items.length" 612 :key="item" 613 :value="item" 614 > 615 {{ items[item - 1] }} 616 </VTab> 617 </VTabs> 618 619 <VCardText> 620 <VWindow v-model="currentTab"> 621 <VWindowItem 622 v-for="item in items.length" 623 :key="item" 624 :value="item" 625 > 626 {{ tabItemText }} 627 </VWindowItem> 628 </VWindow> 629 630 <div class="d-flex justify-center gap-4 mt-3"> 631 <VBtn 632 :disabled="currentTab === 1" 633 @click="preTab" 634 > 635 Previous 636 </VBtn> 637 638 <VBtn 639 :disabled="currentTab === totalTabs" 640 @click="nextTab" 641 > 642 Next 643 </VBtn> 644 </div> 645 </VCardText> 646 </VCard> 647</template> 648`},ke={ts:`<script lang="ts" setup> 649const currentTab = ref('tab-1') 650const 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.' 651<\/script> 652 653<template> 654 <VCard> 655 <VTabs 656 v-model="currentTab" 657 grow 658 stacked 659 > 660 <VTab> 661 <VIcon 662 icon="tabler-phone" 663 class="mb-2" 664 /> 665 <span>Recent</span> 666 </VTab> 667 668 <VTab> 669 <VIcon 670 icon="tabler-heart" 671 class="mb-2" 672 /> 673 <span>Favorites</span> 674 </VTab> 675 676 <VTab> 677 <VIcon 678 icon="tabler-user" 679 class="mb-2" 680 /> 681 <span>Nearby</span> 682 </VTab> 683 </VTabs> 684 685 <VCardText> 686 <VWindow v-model="currentTab"> 687 <VWindowItem 688 v-for="i in 3" 689 :key="i" 690 :value="\`tab-\${i}\`" 691 > 692 {{ tabItemText }} 693 </VWindowItem> 694 </VWindow> 695 </VCardText> 696 </VCard> 697</template> 698`,js:`<script setup> 699const currentTab = ref('tab-1') 700const 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.' 701<\/script> 702 703<template> 704 <VCard> 705 <VTabs 706 v-model="currentTab" 707 grow 708 stacked 709 > 710 <VTab> 711 <VIcon 712 icon="tabler-phone" 713 class="mb-2" 714 /> 715 <span>Recent</span> 716 </VTab> 717 718 <VTab> 719 <VIcon 720 icon="tabler-heart" 721 class="mb-2" 722 /> 723 <span>Favorites</span> 724 </VTab> 725 726 <VTab> 727 <VIcon 728 icon="tabler-user" 729 class="mb-2" 730 /> 731 <span>Nearby</span> 732 </VTab> 733 </VTabs> 734 735 <VCardText> 736 <VWindow v-model="currentTab"> 737 <VWindowItem 738 v-for="i in 3" 739 :key="i" 740 :value="\`tab-\${i}\`" 741 > 742 {{ tabItemText }} 743 </VWindowItem> 744 </VWindow> 745 </VCardText> 746 </VCard> 747</template> 748`},Ce={ts:`<script setup lang="ts"> 749const currentTab = ref('tab-1') 750<\/script> 751 752<template> 753 <VCard> 754 <div class="d-flex"> 755 <div> 756 <VTabs 757 v-model="currentTab" 758 direction="vertical" 759 > 760 <VTab> 761 <VIcon 762 start 763 icon="tabler-user" 764 /> 765 Option 1 766 </VTab> 767 768 <VTab> 769 <VIcon 770 start 771 icon="tabler-lock" 772 /> 773 Option 2 774 </VTab> 775 776 <VTab> 777 <VIcon 778 start 779 icon="tabler-access-point" 780 /> 781 Option 3 782 </VTab> 783 </VTabs> 784 </div> 785 786 <VCardText> 787 <VWindow 788 v-model="currentTab" 789 class="ms-3" 790 > 791 <VWindowItem value="tab-1"> 792 <p> 793 Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero. 794 </p> 795 796 <p class="mb-0"> 797 Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et, tincidunt eget. 798 </p> 799 </VWindowItem> 800 801 <VWindowItem value="tab-2"> 802 <p class="mb-0"> 803 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. 804 </p> 805 </VWindowItem> 806 807 <VWindowItem value="tab-3"> 808 <p class="mb-0"> 809 Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper. 810 </p> 811 </VWindowItem> 812 </VWindow> 813 </VCardText> 814 </div> 815 </VCard> 816</template> 817`,js:`<script setup> 818const currentTab = ref('tab-1') 819<\/script> 820 821<template> 822 <VCard> 823 <div class="d-flex"> 824 <div> 825 <VTabs 826 v-model="currentTab" 827 direction="vertical" 828 > 829 <VTab> 830 <VIcon 831 start 832 icon="tabler-user" 833 /> 834 Option 1 835 </VTab> 836 837 <VTab> 838 <VIcon 839 start 840 icon="tabler-lock" 841 /> 842 Option 2 843 </VTab> 844 845 <VTab> 846 <VIcon 847 start 848 icon="tabler-access-point" 849 /> 850 Option 3 851 </VTab> 852 </VTabs> 853 </div> 854 855 <VCardText> 856 <VWindow 857 v-model="currentTab" 858 class="ms-3" 859 > 860 <VWindowItem value="tab-1"> 861 <p> 862 Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero. 863 </p> 864 865 <p class="mb-0"> 866 Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et, tincidunt eget. 867 </p> 868 </VWindowItem> 869 870 <VWindowItem value="tab-2"> 871 <p class="mb-0"> 872 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. 873 </p> 874 </VWindowItem> 875 876 <VWindowItem value="tab-3"> 877 <p class="mb-0"> 878 Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper. 879 </p> 880 </VWindowItem> 881 </VWindow> 882 </VCardText> 883 </div> 884 </VCard> 885</template> 886`},Ie={ts:`<script setup lang="ts"> 887const currentTab = ref('window-1') 888<\/script> 889 890<template> 891 <div class="d-flex gap-6"> 892 <div> 893 <VTabs 894 v-model="currentTab" 895 direction="vertical" 896 class="v-tabs-pill" 897 > 898 <VTab> 899 <VIcon 900 start 901 icon="tabler-user" 902 /> 903 Option 1 904 </VTab> 905 906 <VTab> 907 <VIcon 908 start 909 icon="tabler-lock" 910 /> 911 Option 2 912 </VTab> 913 914 <VTab> 915 <VIcon 916 start 917 icon="tabler-access-point" 918 /> 919 Option 3 920 </VTab> 921 </VTabs> 922 </div> 923 924 <VCard> 925 <VCardText> 926 <VWindow v-model="currentTab"> 927 <VWindowItem value="window-1"> 928 <p> 929 Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero. 930 </p> 931 932 <p class="mb-0"> 933 Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et. 934 </p> 935 </VWindowItem> 936 937 <VWindowItem value="window-2"> 938 <p class="mb-0"> 939 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. 940 </p> 941 </VWindowItem> 942 943 <VWindowItem value="window-3"> 944 <p class="mb-0"> 945 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. 946 </p> 947 </VWindowItem> 948 </VWindow> 949 </VCardText> 950 </VCard> 951 </div> 952</template> 953`,js:`<script setup> 954const currentTab = ref('window-1') 955<\/script> 956 957<template> 958 <div class="d-flex gap-6"> 959 <div> 960 <VTabs 961 v-model="currentTab" 962 direction="vertical" 963 class="v-tabs-pill" 964 > 965 <VTab> 966 <VIcon 967 start 968 icon="tabler-user" 969 /> 970 Option 1 971 </VTab> 972 973 <VTab> 974 <VIcon 975 start 976 icon="tabler-lock" 977 /> 978 Option 2 979 </VTab> 980 981 <VTab> 982 <VIcon 983 start 984 icon="tabler-access-point" 985 /> 986 Option 3 987 </VTab> 988 </VTabs> 989 </div> 990 991 <VCard> 992 <VCardText> 993 <VWindow v-model="currentTab"> 994 <VWindowItem value="window-1"> 995 <p> 996 Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero. 997 </p> 998 999 <p class="mb-0"> 1000 Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et. 1001 </p> 1002 </VWindowItem> 1003 1004 <VWindowItem value="window-2"> 1005 <p class="mb-0"> 1006 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. 1007 </p> 1008 </VWindowItem> 1009 1010 <VWindowItem value="window-3"> 1011 <p class="mb-0"> 1012 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. 1013 </p> 1014 </VWindowItem> 1015 </VWindow> 1016 </VCardText> 1017 </VCard> 1018 </div> 1019</template> 1020`},He={__name:"tabs",setup(g){return(t,s)=>{const l=me,o=U,r=ce,P=re,y=se,x=le,S=ae,D=Z,F=X,j=K,$=R,B=H,z=E;return c(),T(N,{class:"match-height"},{default:a(()=>[e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Basic",variant:"outlined",code:pe},{default:a(()=>[s[0]||(s[0]=i("p",null,[n("The "),i("code",null,"v-tabs"),n(" component is used for hiding content behind a selectable item.")],-1)),e(l)]),_:1},8,["code"])]),_:1}),e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Stacked",variant:"outlined",code:ke},{default:a(()=>[s[1]||(s[1]=i("p",null,[n("Using "),i("code",null,"stacked"),n(" prop you can have buttons that use both icons and text.")],-1)),e(r)]),_:1},8,["code"])]),_:1}),e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Vertical",variant:"outlined",code:Ce},{default:a(()=>[s[2]||(s[2]=i("p",null,[n("The "),i("code",null,"vertical"),n(" prop allows for "),i("code",null,"v-tab"),n(" components to stack vertically.")],-1)),e(P)]),_:1},8,["code"])]),_:1}),e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Alignment",variant:"outlined",code:be},{default:a(()=>[s[3]||(s[3]=i("p",null,[n("Use "),i("code",null,"align-tabs"),n(" prop to change the tabs alignment.")],-1)),e(y)]),_:1},8,["code"])]),_:1}),e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Pagination",variant:"outlined",code:ge},{default:a(()=>[s[4]||(s[4]=i("p",null,"If the tab items overflow their container, pagination controls will appear on desktop.",-1)),e(x)]),_:1},8,["code"])]),_:1}),e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Custom Icons",variant:"outlined",code:Te},{default:a(()=>[s[5]||(s[5]=i("p",null,[i("code",null,"prev-icon"),n(" and "),i("code",null,"next-icon"),n(" props can be used for applying custom pagination icons.")],-1)),e(S)]),_:1},8,["code"])]),_:1}),e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Fixed",variant:"outlined",code:ve},{default:a(()=>[s[6]||(s[6]=i("p",null,[n("The "),i("code",null,"fixed-tabs"),n(" prop forces "),i("code",null,"v-tab"),n(" to take up all available space up to the maximum width (300px).")],-1)),e(D)]),_:1},8,["code"])]),_:1}),e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Grow",variant:"outlined",code:we},{default:a(()=>[s[7]||(s[7]=i("p",null,[n("The "),i("code",null,"grow"),n(" prop will make the tab items take up all available space with no limit.")],-1)),e(F)]),_:1},8,["code"])]),_:1}),e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Programmatic Navigation",variant:"outlined",code:xe},{default:a(()=>[e(j)]),_:1},8,["code"])]),_:1}),e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Dynamic",variant:"outlined",code:fe},{default:a(()=>[s[8]||(s[8]=i("p",null,[n("Tabs can be dynamically added and removed. This allows you to update to any number and the "),i("code",null,"v-tabs"),n(" component will react.")],-1)),e($)]),_:1},8,["code"])]),_:1}),e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Basic Pill",variant:"outlined",code:Ve},{default:a(()=>[s[9]||(s[9]=i("p",null,[n("Use our custom class "),i("code",null,".v-tabs-pill"),n(" along with "),i("code",null,"v-tabs"),n(" component to style pill tabs.")],-1)),e(B)]),_:1},8,["code"])]),_:1}),e(k,{cols:"12",md:"6"},{default:a(()=>[e(o,{title:"Vertical Pill",variant:"outlined",code:Ie},{default:a(()=>[s[10]||(s[10]=i("p",null,"Use our custom class .v-tabs-pill along with v-tabs component to style pill tabs.",-1)),e(z)]),_:1},8,["code"])]),_:1})]),_:1})}}};export{He as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.