Todos los componentes (244)

Selector de emoji

Elección · EmojiPicker · .amset-emoji

Qué es y cuándo usarlo

El selector de emoji: un botón que abre un panel con el buscador, las categorías, los recientes y el tono de piel, y que devuelve el emoji elegido. Para el chat de un equipo, los comentarios de un ticket, el nombre de un canal.

Cuándo usarlo

Donde se escribe y conviene poder meter un emoji sin saberse el atajo del sistema: un chat, un comentario, una reacción.
onSelect recibe el emoji; lo normal es escribirlo donde estaba el cursor.
trigger para un botón propio; sin él sale el de la carita, con label de nombre.
EmojiPanel suelto para montarlo dentro de un panel propio, sin el botón ni el flotante.
closeOnSelect={false} para elegir varios seguidos; recent={false} y skinTones={false} quitan esas dos partes.

Cuándo no

Una reacción con cuatro opciones fijas: unos botones.
Elegir un icono de la biblioteca: eso es otra pieza.

Teclado: el botón abre el panel y el foco entra en el buscador. Tab pasa por el buscador, las categorías, la rejilla (una sola parada) y el tono de piel. En la rejilla, las flechas recorren los emoji, Inicio y Fin van a los extremos e Intro elige. Escape cierra y el foco vuelve al botón.

Accesibilidad: cada emoji es un botón con su nombre en el idioma del proveedor («cara sonriendo»), no el glifo pelado; las categorías son botones pulsados y el tono de piel es un grupo de radio. El panel es un <dialog> pegado a su botón, como el desplegable.

Peso: el catálogo (casi dos mil emoji con su nombre y sus palabras clave) no viaja con el componente: se pide la primera vez que se abre, unos 37 KB comprimidos por idioma. preloadEmoji() lo trae antes.

Aspecto fino: variables --amset-emoji-cell (el lado de cada celda), --amset-emoji-height (lo alto de la rejilla antes de desplazar) y --amset-emoji-font; clases amset-emoji, amset-emoji__cell, amset-emoji__shelf y amset-emoji__tone.

Cómo se ve

Gracias por tu compra

<EmojiPicker
  label="Elegir emoji"
  trigger={<Button variant="outline">Añadir emoji</Button>}
  onSelect={(emoji) => setTexto((t) => t + " " + emoji)}
/>

Props

Se importa con import { EmojiPicker } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`onSelect`obligatoria	`(emoji: string) => void`	Lo que se hace con el emoji elegido: normalmente, escribirlo donde estaba el cursor.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`closeOnSelect`	`boolean`	Cierra el panel al elegir. Por defecto, si; con `false` se pueden elegir varios seguidos.
`columns`	`number`	Cuantos emoji por fila. 8 por defecto.
`label`	`string`	Como se llama el panel (y el boton por defecto) para el lector de pantalla. Por defecto, «Emoji».
`maxRecent`	`number`	Cuantos recientes se guardan. 24 por defecto.
`offset`	`number`	—
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	—
`placement`	`Placement`	—
`recent`	`boolean`	Guarda los ultimos elegidos en el navegador y los enseña en la primera pestaña. Por defecto, si.
`skinTones`	`boolean`	El selector de tono de piel, que se aplica a los emoji que lo admiten y se recuerda. Por defecto, si.
`trigger`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	Lo que abre el panel. Tiene que ser enfocable: un boton. Por defecto, el boton de la carita.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-emoji-columns`	`8`
`--amset-emoji-cell`	`2.25rem`
`--amset-emoji-height`	`16rem`
`--amset-emoji-font`	`'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif`

Cómo se cambia

.amset-emoji {
  --amset-emoji-columns: ...;
  --amset-emoji-cell: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: