Компонент ButtonGroup в WordPress предназначен для объединения связанных кнопок в одну группу, позволяя пользователю видеть, что кнопки выполняют связанные действия. ButtonGroup упрощает компоновку интерфейса, делая его более удобным и упорядоченным, особенно когда необходимо показать несколько вариантов выбора.
Основные рекомендации по использованию ButtonGroup
- В каждой группе кнопок может быть выбрана и активна только одна кнопка.
- Выбор одной опции автоматически снимает выбор с другой.
- Группа кнопок должна быть четко обозначена и наглядно представлена.
- Используйте стандартные цвета, например, красные кнопки только для действий, которые сложно отменить.
- Кнопки должны быть расположены в логически понятных местах интерфейса.
Пример использования ButtonGroup
import { Button, ButtonGroup } from '@wordpress/components';
import { useState } from 'react';
const MyButtonGroupExample = () => {
const [activeButton, setActiveButton] = useState('option1');
const handleButtonClick = (option) => {
setActiveButton(option);
};
return (
<ButtonGroup>
<Button
variant={activeButton === 'option1' ? 'primary' : 'secondary'}
onClick={() => handleButtonClick('option1')}
>
Кнопка 1
</Button>
<Button
variant={activeButton === 'option2' ? 'primary' : 'secondary'}
onClick={() => handleButtonClick('option2')}
>
Кнопка 2
</Button>
<Button
variant={activeButton === 'option3' ? 'primary' : 'secondary'}
onClick={() => handleButtonClick('option3')}
>
Кнопка 3
</Button>
</ButtonGroup>
);
};
Описание параметров компонента ButtonGroup
orientation
- Описание: Задает направление, в котором будут располагаться кнопки. Может быть горизонтальным или вертикальным.
- Тип:
string - Допустимые значения:
"horizontal"или"vertical" - Значение по умолчанию:
"horizontal" - Пример
<ButtonGroup orientation="vertical">
<Button>Кнопка 1</Button>
<Button>Кнопка 2</Button>
</ButtonGroup>
role
- Описание: Устанавливает роль для
ButtonGroup, что полезно для доступности. Например,role="group"для группировки кнопок. - Тип:
string - Значение по умолчанию:
undefined - Пример
<ButtonGroup role="group">
<Button>Кнопка 1</Button>
<Button>Кнопка 2</Button>
</ButtonGroup>
onClick
- Описание: Обработчик события
onClick, который вызывается при нажатии на любую кнопку в группе. Полезно, если нужно обработать клик для всех кнопок сразу. - Тип:
function - Пример
<ButtonGroup onClick={() => console.log('Кнопка нажата')}>
<Button>Кнопка 1</Button>
<Button>Кнопка 2</Button>
</ButtonGroup>
disabled
- Описание: Если
true, делает все кнопки в группе неактивными. - Тип:
boolean - Значение по умолчанию:
false - Пример:
<ButtonGroup disabled>
<Button>Кнопка 1</Button>
<Button>Кнопка 2</Button>
</ButtonGroup>
className
- Описание: Позволяет добавить кастомные CSS-классы для стилизации
ButtonGroup. - Тип:
string - Значение по умолчанию:
undefined - Пример
<ButtonGroup className="my-custom-button-group">
<Button>Кнопка 1</Button>
<Button>Кнопка 2</Button>
</ButtonGroup>
Заключение
Компонент ButtonGroup удобен для создания группы кнопок, особенно когда требуется логически объединить связанные кнопки. Благодаря параметрам orientation, role, и disabled можно гибко управлять их поведением и внешним видом.