Перейти до вмісту
tatetUI

ButtonGroup

Зчеплені кнопки однієї теми — форматування, масштаб, дії з файлом — зі спільними швами.

Обгортка, що знімає внутрішні кути й накладає сусідні межі в одну лінію. Кнопки лишаються звичайними UiButton — переставити їх чи додати ще одну можна без правки класів.

API

Props

НазваТипТиповоОпис
labelstringundefinedДоступна назва групи: «Форматування тексту», «Масштаб». Без неї скрінрідер оголосить просто «група», і сенс сусідства кнопок зникне.
orientationhorizontalvertical"horizontal"Напрям: у рядок чи стовпчиком (панель інструментів збоку полотна).
blockbooleanfalseРозтягнути на всю ширину батька: кнопки діляться порівну.

Слоти

НазваОпис
defaultКнопки — ПРЯМІ діти групи (`UiButton`, посилання). Кути й шви знімаються саме з них: обгортка навколо кнопки (напр. меню) розірвала б групу, тож для «дія + варіанти» є `UiSplitButton`.

Коли використовувати

  • Панель інструментів із кількох пов'язаних дій: форматування, масштаб, вирівнювання.
  • Кілька рівноцінних дій над одним об'єктом, які мають читатися разом.

Коли НЕ використовувати

  • Для вибору ОДНОГО значення з кількох — це UiToggleGroup: у нього роль radiogroup і стрілки, а тут кожна кнопка — окрема дія.
  • Для головної дії з варіантами — UiSplitButton, де стрілка відкриває меню.
  • Для меню чи поповерів усередині групи: шви знімаються з ПРЯМИХ дітей, і обгортка навколо кнопки розірвала б групу.
  • Для трьох-чотирьох довгих підписів на телефоні. Зчеплені кнопки не переносяться, а підпис кнопки — теж: block-група з трьома короткими словами влазить у 320px, «Перейменувати» поруч із двома сусідами — ні. На вузькому екрані — orientation="vertical", іконки з label або менше кнопок.

Доступність

role="group" з назвою з label: скрінрідер оголошує «Форматування тексту, група» при вході в першу кнопку, і сусідство кнопок отримує сенс. Не toolbar: ця роль зобов'язує до стрілок і однієї зупинки Tab, а тут кожна кнопка — звичайна зупинка Tab.

Кнопки-перемикачі в групі (Жирний, Курсив) передають стан через aria-pressed, а не лише кольором заливки. Кнопка на наведенні й у фокусі піднімається над сусідами — інакше межа наведення й кільце фокуса з одного боку ховалися б під сусідньою кнопкою.