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