ButtonGroup
Компонент, который позволяет группировать кнопки
(компонент Button) и управлять их расположением и выравниванием.
Поддерживает как горизонтальное, так и вертикальное расположение кнопок,
а также позволяет настраивать отступы между ними.
Связанные компоненты:
Особенности использования
ButtonGroupне управляет свойствами вложенных кнопок или групп кнопок. Параметры, такие как размер, цвет или состояние кнопок, должны быть установлены на самих кнопках.- При использовании свойства
stretched, для вложенных кнопок или групп кнопок необходимо самостоятельно определять, должны ли они также растягиваться.
Вложенные ButtonGroup
ButtonGroup поддерживает вложенные ButtonGroup для создания более сложных структур.
Выравнивание кнопок
Если вы используете свойство stretched для ButtonGroup, то можно указать свойство align,
которое позволит управлять выравниванием кнопок по горизонтали.
Доступность (a11y)
ButtonGroupявляется контейнером для кнопок, поэтому основная ответственность за доступность лежит на самих кнопках.- По умолчанию использует
role="group"
Свойства и методы
| Свойство | Описание |
|---|---|
align | AlignTypeГоризонтальное выравнивание элементов внутри группы. По умолчанию: left |
gap | "s" | "none" | "m" | "space"Выставляет в зависимости от По умолчанию: m |
getRootRef | Ref<HTMLDivElement>По умолчанию: - |
mode | "horizontal" | "vertical"Задает расположение элементов внутри группы, вертикальное или горизонтальное. По умолчанию: horizontal |
stretched | booleanРастягивает компонент на всю ширину контейнера. Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо. По умолчанию: false |