Palette

Maintainer:
Ruminat
GitHub
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-labelHTML-атрибут aria-label.string
aria-labelledbyИдентификатор видимого элемента заголовка в Palette.string
classNameHTML-атрибут class.string
columnsКоличество элементов в одной строке.number6
defaultValueЗадает начальное значение состояния компонента при его монтировании.string[]
disabledОтключает опции.booleanfalse
multipleВключает возможность выбора нескольких опций.booleantrue
onBlurОбработчик события onBlur.(event: React.FocusEvent<HTMLButtonElement>) => void
onFocusОбработчик события onFocus.(event: React.FocusEvent<HTMLButtonElement>) => void
onUpdateСрабатывает при изменении состояния пользователем. Передает новое значение как аргумент.(value: string[]) => void
optionClassNameHTML-атрибут value для кнопки палитры.string
optionsСписок опций (элементов палитры).PaletteOption[][]
qaHTML-атрибут data-qa, используется для тестирования.string
rowClassNameHTML-атрибут class для строки палитры.string
sizeОпределяет размер элементов.xs s m l xlm
styleHTML-атрибут style.React.CSSProperties
valueТекущее значение для контролируемого использования компонента.string[]

PaletteOption:

ИмяОписаниеТипЗначение по умолчанию
contentHTML-атрибут class.ReactNode
disabledОтключает кнопку.booleanfalse
titleHTML-атрибут title.string
valueЗначение контрола.string