UIKit
7.11.0
• PaletteКомпоненты
UIKit
7.11.0
Date Components
3.1.0
Navigation
3.3.6
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 |