Palette
Maintainer:
Ruminat
size
columns
disabled
multiple
import {Palette} from '@gravity-ui/uikit';
Компонент Palette (палитра) отображает сетку с иконками, эмодзи, реакциями и символами, которые можно выбирать или снимать с них выбор.
Отключенное состояние
Можно отключить опции с помощью свойства disabled. Если нужно отключить только некоторые опции, измените значение свойства disabled у нужных опций (PaletteOption[]).
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
// disable the first item
<Palette options={[{ ...options[0], disabled: true }, options[1]]} disabled={true} />
// or disable all of them
<Palette options={options} disabled={true} />Размер
Размер Palette можно настроить с помощью свойства size. Размер по умолчанию — s.
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} size={"xs"} />
<Palette options={options} size={"s"} />
<Palette options={options} size={"m"} />
<Palette options={options} size={"l"} />
<Palette options={options} size={"xl"} />Столбцы
Количество столбцов в сетке можно изменить через свойство columns (по умолчанию — 6).
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} columns={1} />Multiple (несколько опций)
По умолчанию можно выбирать и снимать выбор с нескольких опций. Если нужно разрешить выбор только одной опции, отключите свойство multiple.
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} multiple={false} />Свойства
PaletteProps:
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| aria-label | HTML-атрибут aria-label. | string | |
| aria-labelledby | Идентификатор видимого элемента заголовка в Palette. | string | |
| className | HTML-атрибут class. | string | |
| columns | Количество элементов в одной строке. | number | 6 |
| defaultValue | Задает начальное значение состояния компонента при его монтировании. | string[] | |
| disabled | Отключает опции. | boolean | false |
| multiple | Включает возможность выбора нескольких опций. | boolean | true |
| onBlur | Обработчик события onBlur. | (event: React.FocusEvent<HTMLButtonElement>) => void | |
| onFocus | Обработчик события onFocus. | (event: React.FocusEvent<HTMLButtonElement>) => void | |
| onUpdate | Срабатывает при изменении состояния пользователем. Передает новое значение как аргумент. | (value: string[]) => void | |
| optionClassName | HTML-атрибут value для кнопки палитры. | string | |
| options | Список опций (элементов палитры). | PaletteOption[] | [] |
| qa | HTML-атрибут data-qa, используется для тестирования. | string | |
| rowClassName | HTML-атрибут class для строки палитры. | string | |
| size | Определяет размер элементов. | xs s m l xl | m |
| style | HTML-атрибут style. | React.CSSProperties | |
| value | Текущее значение для контролируемого использования компонента. | string[] |
PaletteOption:
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| content | HTML-атрибут class. | ReactNode | |
| disabled | Отключает кнопку. | boolean | false |
| title | HTML-атрибут title. | string | |
| value | Значение контрола. | string |