[{"data":1,"prerenderedAt":174},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fbutton-group":3,"component-meta:UiButtonGroup":132},{"id":4,"title":5,"body":6,"component":119,"dependsOn":120,"description":121,"emitDescriptions":122,"extension":123,"meta":124,"navigation":125,"order":126,"path":127,"seo":128,"status":129,"stem":130,"__hash__":131},"docs\u002Fdocs\u002Fcomponents\u002Fbutton-group.md","ButtonGroup",{"type":7,"value":8,"toc":111},"minimark",[9,18,23,28,31,35,45,49,87,91,104],[10,11,12,13,17],"p",{},"Обгортка, що знімає внутрішні кути й накладає сусідні межі в одну лінію.\nКнопки лишаються звичайними ",[14,15,16],"code",{},"UiButton"," — переставити їх чи додати ще одну\nможна без правки класів.",[19,20],"component-preview",{"name":21,"stage":22},"button-group-basic","min-h-56",[24,25,27],"h2",{"id":26},"api","API",[29,30],"component-api",{},[24,32,34],{"id":33},"коли-використовувати","Коли використовувати",[36,37,38,42],"ul",{},[39,40,41],"li",{},"Панель інструментів із кількох пов'язаних дій: форматування, масштаб,\nвирівнювання.",[39,43,44],{},"Кілька рівноцінних дій над одним об'єктом, які мають читатися разом.",[24,46,48],{"id":47},"коли-не-використовувати","Коли НЕ використовувати",[36,50,51,62,69,72],{},[39,52,53,54,57,58,61],{},"Для вибору ОДНОГО значення з кількох — це ",[14,55,56],{},"UiToggleGroup",": у нього роль\n",[14,59,60],{},"radiogroup"," і стрілки, а тут кожна кнопка — окрема дія.",[39,63,64,65,68],{},"Для головної дії з варіантами — ",[14,66,67],{},"UiSplitButton",", де стрілка відкриває\nменю.",[39,70,71],{},"Для меню чи поповерів усередині групи: шви знімаються з ПРЯМИХ дітей, і\nобгортка навколо кнопки розірвала б групу.",[39,73,74,75,78,79,82,83,86],{},"Для трьох-чотирьох довгих підписів на телефоні. Зчеплені кнопки не\nпереносяться, а підпис кнопки — теж: ",[14,76,77],{},"block","-група з трьома короткими\nсловами влазить у 320px, «Перейменувати» поруч із двома сусідами — ні.\nНа вузькому екрані — ",[14,80,81],{},"orientation=\"vertical\"",", іконки з ",[14,84,85],{},"label"," або\nменше кнопок.",[24,88,90],{"id":89},"доступність","Доступність",[10,92,93,96,97,99,100,103],{},[14,94,95],{},"role=\"group\""," з назвою з ",[14,98,85],{},": скрінрідер оголошує «Форматування\nтексту, група» при вході в першу кнопку, і сусідство кнопок отримує сенс.\nНе ",[14,101,102],{},"toolbar",": ця роль зобов'язує до стрілок і однієї зупинки Tab, а тут\nкожна кнопка — звичайна зупинка Tab.",[10,105,106,107,110],{},"Кнопки-перемикачі в групі (Жирний, Курсив) передають стан через\n",[14,108,109],{},"aria-pressed",", а не лише кольором заливки. Кнопка на наведенні й у фокусі\nпіднімається над сусідами — інакше межа наведення й кільце фокуса з одного\nбоку ховалися б під сусідньою кнопкою.",{"title":112,"searchDepth":113,"depth":113,"links":114},"",2,[115,116,117,118],{"id":26,"depth":113,"text":27},{"id":33,"depth":113,"text":34},{"id":47,"depth":113,"text":48},{"id":89,"depth":113,"text":90},"UiButtonGroup",[],"Зчеплені кнопки однієї теми — форматування, масштаб, дії з файлом — зі спільними швами.",{},"md",{},true,14,"\u002Fdocs\u002Fcomponents\u002Fbutton-group",{"title":5,"description":121},"stable","docs\u002Fcomponents\u002Fbutton-group","ieRKGdknp7enJziSd0TSlgA9AfxcQZo6TWYO185-oPc",{"mode":133,"prefetch":134,"preload":134,"filePath":135,"declarationPath":136,"pascalName":119,"kebabName":137,"chunkName":138,"priority":139,"_scanned":125,"meta":140},"all",false,"app\u002Fcomponents\u002Fui\u002FUiButtonGroup.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiButtonGroup.vue","ui-button-group","components\u002Fui-button-group",1,{"type":139,"props":141,"slots":165,"events":171,"exposed":172,"hash":173},[142,147,157],{"name":85,"global":134,"default":143,"description":144,"tags":145,"required":134,"type":146,"schema":146},"undefined","Доступна назва групи: «Форматування тексту», «Масштаб». Без неї\nскрінрідер оголосить просто «група», і сенс сусідства кнопок зникне.",[],"string",{"name":148,"global":134,"default":149,"description":150,"tags":151,"required":134,"type":152,"schema":153},"orientation","\"horizontal\"","Напрям: у рядок чи стовпчиком (панель інструментів збоку полотна).",[],"\"horizontal\" | \"vertical\"",{"kind":154,"type":152,"schema":155},"enum",{"0":149,"1":156},"\"vertical\"",{"name":77,"global":134,"default":158,"description":159,"tags":160,"required":134,"type":161,"schema":162},"false","Розтягнути на всю ширину батька: кнопки діляться порівну.",[],"boolean",{"kind":154,"type":161,"schema":163},{"0":158,"1":164},"true",[166],{"name":167,"type":168,"description":169,"tags":170,"schema":168},"default","any","Кнопки — ПРЯМІ діти групи (`UiButton`, посилання). Кути й шви\nзнімаються саме з них: обгортка навколо кнопки (напр. меню) розірвала б\nгрупу, тож для «дія + варіанти» є `UiSplitButton`.",[],[],[],"GDDfsDmZb6w_agUNS2QZsi0nbQnCni7tN8VLsTMYg68",1792004323331]