[{"data":1,"prerenderedAt":889},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-tabs":12,"i-ph:code":887},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":881,"meta":882,"navigation":120,"path":883,"seo":884,"stem":885,"__hash__":886},"docs\u002Fdocs\u002Fcomponents\u002Ftabs.md","Tabs",{"type":16,"value":17,"toc":875},"minimark",[18,22,26,461,466,471,556,560,625,629,658,662,665,723,726,753,757,760,871],[19,20,14],"h1",{"id":21},"tabs",[23,24,25],"p",{},"A tabs component that allows users to switch between different views or sections of content. It supports two styl",[27,28,30],"tabs-example",{"source-path":29},"Tabs\u002FTabs.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Tab, Tabs } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst activeTab = ref('tab1')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTabs v-model=\"activeTab\">\n    \u003CTab value=\"tab1\" label=\"Tab 1\" \u002F>\n    \u003CTab value=\"tab2\" label=\"Tab 2\" \u002F>\n    \u003CTab value=\"tab3\" label=\"Tab 3\" \u002F>\n  \u003C\u002FTabs>\n\n  \u003Cdiv class=\"mt-md\">\n    \u003Cdiv v-if=\"activeTab === 'tab1'\">\n      Content for Tab 1\n    \u003C\u002Fdiv>\n    \u003Cdiv v-if=\"activeTab === 'tab2'\">\n      Content for Tab 2\n    \u003C\u002Fdiv>\n    \u003Cdiv v-if=\"activeTab === 'tab3'\">\n      Content for Tab 3\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,95,115,122,152,162,167,177,201,236,267,298,308,313,335,356,363,373,393,399,408,428,434,443,452],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":47},">\n",[41,61,63,66,69,72,75,78,81,84,88,92],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," Tab",[41,73,74],{"class":47},",",[41,76,77],{"class":55}," Tabs",[41,79,80],{"class":47}," }",[41,82,83],{"class":51}," from",[41,85,87],{"class":86},"sBR95"," '",[41,89,91],{"class":90},"sfmH-","@dolanske\u002Fvui",[41,93,94],{"class":86},"'\n",[41,96,98,100,102,105,107,109,111,113],{"class":43,"line":97},3,[41,99,65],{"class":51},[41,101,68],{"class":47},[41,103,104],{"class":55}," ref",[41,106,80],{"class":47},[41,108,83],{"class":51},[41,110,87],{"class":86},[41,112,35],{"class":90},[41,114,94],{"class":86},[41,116,118],{"class":43,"line":117},4,[41,119,121],{"emptyLinePlaceholder":120},true,"\n",[41,123,125,129,132,135,138,141,144,147,149],{"class":43,"line":124},5,[41,126,128],{"class":127},"sCMWV","const",[41,130,131],{"class":55}," activeTab",[41,133,134],{"class":47}," =",[41,136,104],{"class":137},"sRTv0",[41,139,140],{"class":47},"(",[41,142,143],{"class":86},"'",[41,145,146],{"class":90},"tab1",[41,148,143],{"class":86},[41,150,151],{"class":47},")\n",[41,153,155,158,160],{"class":43,"line":154},6,[41,156,157],{"class":47},"\u003C\u002F",[41,159,52],{"class":51},[41,161,59],{"class":47},[41,163,165],{"class":43,"line":164},7,[41,166,121],{"emptyLinePlaceholder":120},[41,168,170,172,175],{"class":43,"line":169},8,[41,171,48],{"class":47},[41,173,174],{"class":51},"template",[41,176,59],{"class":47},[41,178,180,183,185,188,191,194,197,199],{"class":43,"line":179},9,[41,181,182],{"class":47},"  \u003C",[41,184,14],{"class":51},[41,186,187],{"class":55}," v-model",[41,189,190],{"class":47},"=",[41,192,193],{"class":86},"\"",[41,195,196],{"class":90},"activeTab",[41,198,193],{"class":86},[41,200,59],{"class":47},[41,202,204,207,210,213,215,217,219,221,224,226,228,231,233],{"class":43,"line":203},10,[41,205,206],{"class":47},"    \u003C",[41,208,209],{"class":51},"Tab",[41,211,212],{"class":55}," value",[41,214,190],{"class":47},[41,216,193],{"class":86},[41,218,146],{"class":90},[41,220,193],{"class":86},[41,222,223],{"class":55}," label",[41,225,190],{"class":47},[41,227,193],{"class":86},[41,229,230],{"class":90},"Tab 1",[41,232,193],{"class":86},[41,234,235],{"class":47}," \u002F>\n",[41,237,239,241,243,245,247,249,252,254,256,258,260,263,265],{"class":43,"line":238},11,[41,240,206],{"class":47},[41,242,209],{"class":51},[41,244,212],{"class":55},[41,246,190],{"class":47},[41,248,193],{"class":86},[41,250,251],{"class":90},"tab2",[41,253,193],{"class":86},[41,255,223],{"class":55},[41,257,190],{"class":47},[41,259,193],{"class":86},[41,261,262],{"class":90},"Tab 2",[41,264,193],{"class":86},[41,266,235],{"class":47},[41,268,270,272,274,276,278,280,283,285,287,289,291,294,296],{"class":43,"line":269},12,[41,271,206],{"class":47},[41,273,209],{"class":51},[41,275,212],{"class":55},[41,277,190],{"class":47},[41,279,193],{"class":86},[41,281,282],{"class":90},"tab3",[41,284,193],{"class":86},[41,286,223],{"class":55},[41,288,190],{"class":47},[41,290,193],{"class":86},[41,292,293],{"class":90},"Tab 3",[41,295,193],{"class":86},[41,297,235],{"class":47},[41,299,301,304,306],{"class":43,"line":300},13,[41,302,303],{"class":47},"  \u003C\u002F",[41,305,14],{"class":51},[41,307,59],{"class":47},[41,309,311],{"class":43,"line":310},14,[41,312,121],{"emptyLinePlaceholder":120},[41,314,316,318,321,324,326,328,331,333],{"class":43,"line":315},15,[41,317,182],{"class":47},[41,319,320],{"class":51},"div",[41,322,323],{"class":55}," class",[41,325,190],{"class":47},[41,327,193],{"class":86},[41,329,330],{"class":90},"mt-md",[41,332,193],{"class":86},[41,334,59],{"class":47},[41,336,338,340,342,345,347,349,352,354],{"class":43,"line":337},16,[41,339,206],{"class":47},[41,341,320],{"class":51},[41,343,344],{"class":55}," v-if",[41,346,190],{"class":47},[41,348,193],{"class":86},[41,350,351],{"class":90},"activeTab === 'tab1'",[41,353,193],{"class":86},[41,355,59],{"class":47},[41,357,359],{"class":43,"line":358},17,[41,360,362],{"class":361},"sX1ls","      Content for Tab 1\n",[41,364,366,369,371],{"class":43,"line":365},18,[41,367,368],{"class":47},"    \u003C\u002F",[41,370,320],{"class":51},[41,372,59],{"class":47},[41,374,376,378,380,382,384,386,389,391],{"class":43,"line":375},19,[41,377,206],{"class":47},[41,379,320],{"class":51},[41,381,344],{"class":55},[41,383,190],{"class":47},[41,385,193],{"class":86},[41,387,388],{"class":90},"activeTab === 'tab2'",[41,390,193],{"class":86},[41,392,59],{"class":47},[41,394,396],{"class":43,"line":395},20,[41,397,398],{"class":361},"      Content for Tab 2\n",[41,400,402,404,406],{"class":43,"line":401},21,[41,403,368],{"class":47},[41,405,320],{"class":51},[41,407,59],{"class":47},[41,409,411,413,415,417,419,421,424,426],{"class":43,"line":410},22,[41,412,206],{"class":47},[41,414,320],{"class":51},[41,416,344],{"class":55},[41,418,190],{"class":47},[41,420,193],{"class":86},[41,422,423],{"class":90},"activeTab === 'tab3'",[41,425,193],{"class":86},[41,427,59],{"class":47},[41,429,431],{"class":43,"line":430},23,[41,432,433],{"class":361},"      Content for Tab 3\n",[41,435,437,439,441],{"class":43,"line":436},24,[41,438,368],{"class":47},[41,440,320],{"class":51},[41,442,59],{"class":47},[41,444,446,448,450],{"class":43,"line":445},25,[41,447,303],{"class":47},[41,449,320],{"class":51},[41,451,59],{"class":47},[41,453,455,457,459],{"class":43,"line":454},26,[41,456,157],{"class":47},[41,458,174],{"class":51},[41,460,59],{"class":47},[462,463,465],"h3",{"id":464},"props","Props",[467,468,470],"h4",{"id":469},"tabs-component","Tabs Component",[472,473,474,490],"table",{},[475,476,477],"thead",{},[478,479,480,484,487],"tr",{},[481,482,483],"th",{},"Name",[481,485,486],{},"Default",[481,488,489],{},"Type",[491,492,493,518,538],"tbody",{},[478,494,495,501,506],{},[496,497,498],"td",{},[38,499,500],{},"variant",[496,502,503],{},[38,504,505],{},"default",[496,507,508,510,511,510,514,517],{},[38,509,505],{}," ",[38,512,513],{},"filled",[515,516],"br",{}," The visual style of the tabs",[478,519,520,525,530],{},[496,521,522],{},[38,523,524],{},"expand",[496,526,527],{},[38,528,529],{},"false",[496,531,532,510,535,537],{},[38,533,534],{},"boolean",[515,536],{}," Whether the tabs should expand to full width",[478,539,540,545,549],{},[496,541,542],{},[38,543,544],{},"disabled",[496,546,547],{},[38,548,529],{},[496,550,551,510,553,555],{},[38,552,534],{},[515,554],{}," Whether all tabs are disabled",[467,557,559],{"id":558},"tab-component","Tab Component",[472,561,562,572],{},[475,563,564],{},[478,565,566,568,570],{},[481,567,483],{},[481,569,486],{},[481,571,489],{},[491,573,574,591,609],{},[478,575,576,580,584],{},[496,577,578],{},[38,579,544],{},[496,581,582],{},[38,583,529],{},[496,585,586,510,588,590],{},[38,587,534],{},[515,589],{}," Whether the tab is disabled",[478,592,593,598,601],{},[496,594,595],{},[38,596,597],{},"value",[496,599,600],{},"—",[496,602,603,510,606,608],{},[38,604,605],{},"string",[515,607],{}," The value of the tab",[478,610,611,616,618],{},[496,612,613],{},[38,614,615],{},"label",[496,617,600],{},[496,619,620,510,622,624],{},[38,621,605],{},[515,623],{}," The label text to display in the tab",[462,626,628],{"id":627},"events","Events",[472,630,631,642],{},[475,632,633],{},[478,634,635,637,640],{},[481,636,483],{},[481,638,639],{},"Payload",[481,641,489],{},[491,643,644],{},[478,645,646,651,655],{},[496,647,648],{},[38,649,650],{},"update:modelValue",[496,652,653],{},[38,654,605],{},[496,656,657],{},"Emitted when the active tab changes",[462,659,661],{"id":660},"slots","Slots",[467,663,470],{"id":664},"tabs-component-1",[472,666,667,679],{},[475,668,669],{},[478,670,671,673,676],{},[481,672,483],{},[481,674,675],{},"Accepts",[481,677,678],{},"Description",[491,680,681,695,709],{},[478,682,683,687,692],{},[496,684,685],{},[38,686,505],{},[496,688,689],{},[38,690,691],{},"any",[496,693,694],{},"Tab components",[478,696,697,702,706],{},[496,698,699],{},[38,700,701],{},"start",[496,703,704],{},[38,705,691],{},[496,707,708],{},"Content to display before the tabs",[478,710,711,716,720],{},[496,712,713],{},[38,714,715],{},"end",[496,717,718],{},[38,719,691],{},[496,721,722],{},"Content to display after the tabs",[467,724,559],{"id":725},"tab-component-1",[472,727,728,738],{},[475,729,730],{},[478,731,732,734,736],{},[481,733,483],{},[481,735,675],{},[481,737,678],{},[491,739,740],{},[478,741,742,746,750],{},[496,743,744],{},[38,745,505],{},[496,747,748],{},[38,749,691],{},[496,751,752],{},"Custom content for the tab",[462,754,756],{"id":755},"tokens","Tokens",[23,758,759],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[472,761,762,773],{},[475,763,764],{},[478,765,766,769,771],{},[481,767,768],{},"Token",[481,770,486],{},[481,772,678],{},[491,774,775,790,805,824,839,854],{},[478,776,777,782,787],{},[496,778,779],{},[38,780,781],{},"--vui-tabs-height",[496,783,784],{},[38,785,786],{},"40px",[496,788,789],{},"Tab bar height",[478,791,792,797,802],{},[496,793,794],{},[38,795,796],{},"--vui-tabs-item-padding-inline",[496,798,799],{},[38,800,801],{},"10px",[496,803,804],{},"Tab item horizontal padding",[478,806,807,812,821],{},[496,808,809],{},[38,810,811],{},"--vui-tabs-underline-color",[496,813,814],{},[815,816,818],"a",{"href":817},"\u002Fdocs\u002Ftokens\u002Fcolors",[38,819,820],{},"var(--color-text)",[496,822,823],{},"Active tab underline color",[478,825,826,831,836],{},[496,827,828],{},[38,829,830],{},"--vui-tabs-gap",[496,832,833],{},[38,834,835],{},"4px",[496,837,838],{},"Gap between tab items",[478,840,841,846,851],{},[496,842,843],{},[38,844,845],{},"--vui-tabs-underline-size",[496,847,848],{},[38,849,850],{},"2px",[496,852,853],{},"Active tab underline thickness",[478,855,856,861,868],{},[496,857,858],{},[38,859,860],{},"--vui-tabs-border-color",[496,862,863],{},[815,864,865],{"href":817},[38,866,867],{},"var(--color-border)",[496,869,870],{},"Tab bar bottom border color",[872,873,874],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sCMWV, html code.shiki .sCMWV{--shiki-dark:#CB7676;--shiki-light:#AB5959;--shiki-default:#CB7676}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":36,"searchDepth":62,"depth":62,"links":876},[877,878,879,880],{"id":464,"depth":97,"text":465},{"id":627,"depth":97,"text":628},{"id":660,"depth":97,"text":661},{"id":755,"depth":97,"text":756},"md",{},"\u002Fdocs\u002Fcomponents\u002Ftabs",{"title":14,"description":25},"docs\u002Fcomponents\u002Ftabs","-8Kyiu9EKG03gAgMPIcuQ1TpRMc0riEOcoHBJQHNffc",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":888},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200883349]