Palette
Responsable:
Ruminat
size
columns
disabled
multiple
import {Palette} from '@gravity-ui/uikit';
El Palette componente se usa para mostrar una cuadrícula de íconos, emojis, reacciones y símbolos que puede seleccionar o deseleccionar.
Estado desactivado
Puede desactivar todas las opciones utilizando la disabled propiedad. Si desea deshabilitar solo ciertas opciones, puede cambiar la disabled propiedad de esas options (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} />Tamaño
Usa la size propiedad para administrar el Palette tamaño. El tamaño predeterminado es 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"} />Columnas
Puede cambiar el número de columnas de la cuadrícula cambiando la columns propiedad (el valor predeterminado es 6).
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} columns={1} />Múltiples
De forma predeterminada, puede seleccionar y deseleccionar varias opciones. En caso de que solo desee seleccionar una opción, puede deshabilitar la multiple propiedad.
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} multiple={false} />Propiedades
PaletteProps:
| Nombre | Descripción | Tipo | Predeterminado |
|---|---|---|---|
| etiqueta aria | aria-label Atributo HTML | string | |
| aria - etiquetada por | ID del elemento de Palette subtítulo visible | string | |
| className | class Atributo HTML | string | |
| columnas | Número de elementos por fila | number | 6 |
| defaultValue | Establece el estado del valor inicial cuando se monta el componente | string[] | |
| inhabilitado | Desactiva las opciones | boolean | false |
| múltiple | Permite seleccionar varias opciones | boolean | true |
| onBlur | onBlur controlador de eventos | (evento: <HTMLButtonElement> React.focusEvent () = nulo> | |
| onFocus | onFocus controlador de eventos | (evento: <HTMLButtonElement> React.focusEvent () = nulo> | |
| onUpdate | Se activa cuando el usuario cambia el estado Proporciona el nuevo valor como argumento de una devolución de llamada | (value: string[]) => void | |
| optionClassName | class Atributo HTML para el botón de paleta | string | |
| opciones | Lista de opciones (elementos de paleta) | PaletteOption[] | [] |
| qa | data-qa Atributo HTML, usado para realizar pruebas | string | |
| rowClassName | class Atributo HTML para una fila de paleta | string | |
| tamaño | Establece el tamaño de los elementos | xs xl | m |
| estilo | style Atributo HTML | React.CSSProperties | |
| valor | Valor actual para el uso controlado del componente | string[] |
PaletteOption:
| Nombre | Descripción | Tipo | Predeterminado |
|---|---|---|---|
| contenido | class Atributo HTML | ReactNode | |
| inhabilitado | Desactiva el botón | boolean | false |
| título | title Atributo HTML | string | |
| valor | Valor de control | string |