CircularOptionPicker — это внутренний React-компонент пакета @wordpress/components, используемый для отображения опций в виде кнопок с круглой формой. Обычно применяется для выбора цветовой схемы или других элементов, представленных в круглом формате.
Использование CircularOptionPicker
В примере ниже мы создаем круглый переключатель для выбора цвета. Компонент отображает набор кнопок, каждая из которых представляет один из цветов.
import { useState } from 'react';
import { CircularOptionPicker } from '@wordpress/components';
const ColorPickerExample = () => {
const [currentColor, setCurrentColor] = useState(null);
const colors = [
{ color: '#f44336', name: 'Red' },
{ color: '#4CAF50', name: 'Green' },
{ color: '#2196F3', name: 'Blue' },
];
const colorOptions = colors.map(({ color, name }, index) => (
<CircularOptionPicker.Option
key={`${color}-${index}`}
tooltipText={name}
style={{ backgroundColor: color }}
isSelected={index === currentColor}
onClick={() => setCurrentColor(index)}
aria-label={name}
/>
));
return (
<CircularOptionPicker
options={colorOptions}
actions={
<CircularOptionPicker.ButtonAction onClick={() => setCurrentColor(null)}>
Очистить
</CircularOptionPicker.ButtonAction>
}
/>
);
};
Описание основных параметров (props)
className
- Описание: CSS-класс, который применяется к обёртке компонента.
- Тип:
string - Обязателен: Нет
- Пример:
<CircularOptionPicker className="custom-picker" options={...} />
actions
- Описание: Элементы, отображаемые после опций, такие как кнопка очистки.
- Тип:
ReactNode - Обязателен: Нет
- Пример:
<CircularOptionPicker
options={...}
actions={<CircularOptionPicker.ButtonAction onClick={() => ...}>Очистить</CircularOptionPicker.ButtonAction>}
/>
options
- Описание: Набор элементов, отображаемых в виде круглых опций, таких как цветовые свотчи.
- Тип:
ReactNode - Обязателен: Да
- Пример:
<CircularOptionPicker options={colorOptions} />
children
- Описание: Вложенные элементы компонента.
- Тип:
ReactNode - Обязателен: Нет
asButtons
- Описание: Определяет, будут ли опции представлены как кнопки, каждая из которых получает свой таб-стоп.
- Тип:
boolean - Обязателен: Нет
- По умолчанию:
false
loop
- Описание: Отключает цикличное переключение при использовании клавиатуры. Используется, если
asButtonsне установлен. - Тип:
boolean - Обязателен: Нет
- По умолчанию:
true
Вложенные компоненты CircularOptionPicker
CircularOptionPicker.ButtonAction
Кнопка-действие, которая отображается рядом с опциями. Часто используется как кнопка «Очистить», чтобы снять текущий выбор.
- Параметры:
className: CSS-класс для кнопки.children: Контент кнопки.
- Пример использования:
<CircularOptionPicker.ButtonAction className="clear-button">
Очистить выбор
</CircularOptionPicker.ButtonAction>
CircularOptionPicker.DropdownLinkAction
Действие в виде ссылки, скрытое за выпадающим меню. Используется для отображения дополнительных опций.
- Параметры:
className: CSS-класс для компонента Dropdown.linkText: Текст ссылки, отображаемый на кнопке.dropdownProps: Свойства для компонента Dropdown.buttonProps: Свойства для вложенной кнопки.
- Пример использования:
<CircularOptionPicker.DropdownLinkAction
linkText="Дополнительно"
dropdownProps={{ placement: 'bottom-start' }}
buttonProps={{ className: 'extra-options-button' }}
/>
Пример использования с вложенными компонентами
В следующем примере используется CircularOptionPicker с набором цветовых опций, а также кнопка-действие для очистки текущего выбора и дополнительное выпадающее меню с другими настройками.
import { useState } from 'react';
import { CircularOptionPicker } from '@wordpress/components';
const ExtendedColorPickerExample = () => {
const [selectedColor, setSelectedColor] = useState(null);
const colorOptions = [
{ color: '#ff5733', name: 'Coral' },
{ color: '#33c4ff', name: 'Sky Blue' },
{ color: '#d4ff33', name: 'Lime' },
].map(({ color, name }, index) => (
<CircularOptionPicker.Option
key={`${color}-${index}`}
tooltipText={name}
style={{ backgroundColor: color }}
isSelected={selectedColor === index}
onClick={() => setSelectedColor(index)}
aria-label={name}
/>
));
return (
<CircularOptionPicker
options={colorOptions}
actions={
<>
<CircularOptionPicker.ButtonAction onClick={() => setSelectedColor(null)}>
Сбросить выбор
</CircularOptionPicker.ButtonAction>
<CircularOptionPicker.DropdownLinkAction
linkText="Настройки"
dropdownProps={{ placement: 'bottom-end' }}
buttonProps={{ className: 'settings-dropdown' }}
>
Дополнительные параметры
</CircularOptionPicker.DropdownLinkAction>
</>
}
/>
);
};
Заключение
CircularOptionPicker — удобный компонент для реализации круглых кнопок выбора, особенно полезный при работе с цветовыми палитрами и похожими элементами.