[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Ftabs":3,"component-meta:UiTabs":166},{"id":4,"title":5,"body":6,"component":136,"dependsOn":152,"description":153,"emitDescriptions":154,"extension":157,"meta":158,"navigation":159,"order":160,"path":161,"seo":162,"status":163,"stem":164,"__hash__":165},"docs\u002Fdocs\u002Fcomponents\u002Ftabs.md","Tabs",{"type":7,"value":8,"toc":142},"minimark",[9,26,41,46,51,55,70,74,77,81,84,88,91,94,98,123],[10,11,12,13,17,18,21,22,25],"p",{},"Дві форми: ",[14,15,16],"code",{},"underline"," для розділення вмісту на сторінці та ",[14,19,20],{},"pills"," для\nперемикача вигляду. Успадковану реалізацію переписано на токени: іконки\nтам були рядками-класами Font Awesome, тут — слоти ",[14,23,24],{},"tab-\u003Cid>",".",[10,27,28,29,32,33,36,37,40],{},"Проп ",[14,30,31],{},"size"," додає компактні вкладки (",[14,34,35],{},"sm",") для панелей інструментів і\nвкладок усередині картки — на дотику зону 45×45 добудовує невидимий\n",[14,38,39],{},"::after",", тож кнопки вкладок лишилися щільними навіть на телефоні.",[42,43,45],"h2",{"id":44},"приклад","Приклад",[47,48],"component-preview",{"name":49,"stage":50},"tabs-basic","min-h-52",[42,52,54],{"id":53},"синхронізація-з-url","Синхронізація з URL",[10,56,57,58,61,62,65,66,69],{},"Передайте ",[14,59,60],{},"queryParam=\"tab\""," — активна вкладка читається з ",[14,63,64],{},"?tab="," і\nпишеться туди через ",[14,67,68],{},"router.replace",". Для вкладки за замовчуванням\nпараметр НЕ пишеться: URL залишається чистим. Кнопки «Назад\u002FВперед»\nперемикають вкладки, як сторінки.",[42,71,73],{"id":72},"api","API",[75,76],"component-api",{},[42,78,80],{"id":79},"коли-використовувати","Коли використовувати",[10,82,83],{},"Коли вміст не вміщується без втрати контексту: налаштування об'єкта,\nвкладки «Огляд \u002F Журнал», перемикач щільності списку.",[42,85,87],{"id":86},"коли-не-використовувати","Коли НЕ використовувати",[10,89,90],{},"Якщо панелі — кроки однієї форми, потрібен Stepper, а не вкладки: вкладки\nнічого не говорять про порядок і прогрес.",[10,92,93],{},"Не ховайте за вкладками те, що користувач має порівнювати одночасно.",[42,95,97],{"id":96},"доступність","Доступність",[10,99,100,103,104,103,107,110,111,114,115,118,119,122],{},[14,101,102],{},"role=\"tablist\""," → ",[14,105,106],{},"role=\"tab\"",[14,108,109],{},"role=\"tabpanel\""," з ",[14,112,113],{},"aria-selected",",\n",[14,116,117],{},"aria-controls"," і ",[14,120,121],{},"aria-labelledby",". Roving tabindex: в обході Tab — лише\nактивна вкладка, стрілки перемикають і одразу активують панель;\nдеактивовані вкладки пропускаються, а не зупиняють обхід.",[10,124,125,126,128,129,133,134,137,138,141],{},"Слот ",[14,127,24],{}," налаштовує ",[130,131,132],"strong",{},"вміст"," кнопки — наприклад, додає іконку або\nлічильник. Саму кнопку, id, ролі та keyboard handlers завжди рендерить\n",[14,135,136],{},"UiTabs",". Якщо старий слот повертав власний ",[14,139,140],{},"\u003Cbutton>",", залиште тільки його\nвнутрішню розмітку.",{"title":143,"searchDepth":144,"depth":144,"links":145},"",2,[146,147,148,149,150,151],{"id":44,"depth":144,"text":45},{"id":53,"depth":144,"text":54},{"id":72,"depth":144,"text":73},{"id":79,"depth":144,"text":80},{"id":86,"depth":144,"text":87},{"id":96,"depth":144,"text":97},[],"Вкладки з клавіатурною навігацією, слотами панелей і опційною синхронізацією з URL.",{"update:modelValue":155,"change":156},"Новий активний id. Використовуйте через `v-model`.","Активна вкладка змінилася — клік, клавіатура або навігація за URL.","md",{},true,24,"\u002Fdocs\u002Fcomponents\u002Ftabs",{"title":5,"description":153},"stable","docs\u002Fcomponents\u002Ftabs","1HB9HqgqllVhtzi1cNRWAonnI7KXwvTJjZ3TV9LBBWM",{"mode":167,"prefetch":168,"preload":168,"filePath":169,"declarationPath":170,"pascalName":136,"kebabName":171,"chunkName":172,"priority":173,"_scanned":159,"meta":174},"all",false,"app\u002Fcomponents\u002Fui\u002FUiTabs.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiTabs.vue","ui-tabs","components\u002Fui-tabs",1,{"type":173,"props":175,"slots":235,"events":241,"exposed":254,"hash":255},[176,204,209,218,226,230],{"name":177,"global":168,"description":178,"tags":179,"required":159,"type":180,"schema":181},"tabs","Панелі вкладок.",[],"TabItem[]",{"kind":182,"type":180,"schema":183},"array",{"0":184},{"kind":185,"type":186,"schema":187},"object","TabItem",{"id":188,"label":192,"disabled":195},{"name":189,"global":168,"description":143,"tags":190,"required":159,"type":191,"schema":191},"id",[],"string",{"name":193,"global":168,"description":143,"tags":194,"required":159,"type":191,"schema":191},"label",[],{"name":196,"global":168,"description":143,"tags":197,"required":168,"type":198,"schema":199},"disabled",[],"boolean",{"kind":200,"type":198,"schema":201},"enum",{"0":202,"1":203},"false","true",{"name":205,"global":168,"default":206,"description":207,"tags":208,"required":168,"type":191,"schema":191},"modelValue","undefined","Активна вкладка. Використовуйте через `v-model`.",[],{"name":210,"global":168,"default":211,"description":212,"tags":213,"required":168,"type":214,"schema":215},"variant","\"underline\"","Вигляд. `underline` — класичні вкладки з лінією, `pills` — сегментний\nперемикач (фонова підкладка, активна сегмента «піднята»).",[],"\"underline\" | \"pills\"",{"kind":200,"type":214,"schema":216},{"0":211,"1":217},"\"pills\"",{"name":31,"global":168,"default":219,"description":220,"tags":221,"required":168,"type":222,"schema":223},"\"md\"","Висота кнопок вкладок. `sm` — для вкладок усередині панелі\nінструментів чи картки; на дотику зону 45×45 дає невидимий ::after.",[],"\"sm\" | \"md\"",{"kind":200,"type":222,"schema":224},{"0":225,"1":219},"\"sm\"",{"name":227,"global":168,"default":206,"description":228,"tags":229,"required":168,"type":191,"schema":191},"queryParam","Назва query-параметра, з яким синхронізується активна вкладка.\nНапр. `\"tab\"` — стан читається з `?tab=` і пишеться туди через\n`router.replace`. Потрібен лише для вкладок, що мають переживати\nперезавантаження сторінки.",[],{"name":231,"global":168,"default":232,"description":233,"tags":234,"required":168,"type":191,"schema":191},"ariaLabel","\"Вкладки\"","Доступна назва для `role=\"tablist\"`.",[],[236],{"name":237,"type":238,"description":239,"tags":240,"schema":238},"default","any","Вміст активної панелі, якщо не задано слот `panel-\u003Cid>`.",[],[242,248],{"name":243,"description":143,"tags":244,"type":245,"signature":246,"schema":247},"update:modelValue",[],"[value: string]","(event: \"update:modelValue\", value: string): void",[191],{"name":249,"description":143,"tags":250,"type":251,"signature":252,"schema":253},"change",[],"[id: string]","(event: \"change\", id: string): void",[191],[],"WgMZm1_fpzFtNCnS2AuQIj2sJt2LybIcCaDKlGYD5Ts",1789660506385]