Todos los componentes (204)

Desplegable

Capas · Dropdown

Qué es y cuándo usarlo

Un panel flotante pegado a su botón, con lo que sea dentro: filtros avanzados, un resumen, un formulario corto. Es el hueco que dejan ActionMenu (una lista de acciones) y Dialog (algo que corta el paso): esto ni es una lista ni tapa la página con un velo.

Cuándo usarlo

Filtros avanzados de una barra de herramientas, con «Aplicar» en el footer.
Un resumen que se consulta sin salir de la pantalla: el carrito, el usuario.
children y footer pueden ser una función que recibe close, para un botón que aplica y cierra.
openOn="contextmenu" para abrirlo con el clic derecho sobre el disparador; open y onOpenChange para abrirlo desde fuera.

Cuándo no

Una lista de acciones: ActionMenu.
Una decisión que no se puede ignorar: Dialog.
Una frase de ayuda: Tooltip.
El «¿seguro?» de un botón: ConfirmAction.

Teclado: el disparador se pulsa con Intro o Espacio; al abrir, el foco entra en el panel y Tab se queda dentro de él. Escape o un clic fuera lo cierran y el foco vuelve al disparador.

Accesibilidad: el panel es un <dialog> nativo colocado junto a su disparador, con el title como nombre, que es lo que se anuncia al abrirlo; con hiddenTitle deja de verse pero se sigue anunciando. Mientras está abierto, el resto de la página queda inerte, aunque no se oscurezca. trigger tiene que ser enfocable: un botón.

Aspecto fino: sin variables propias. Se ajusta con las clases amset-dropdown__* y la de todos los flotantes, amset-floating; el ancho, con width; el sitio, con placement y offset.

Cómo se ve

<Dropdown
  title="Filtros avanzados"
  trigger={<Button startIcon={<FilterIcon />}>Filtros</Button>}
  width="18rem"
  footer={(cerrar) => <Button size="sm" variant="solid" onPress={cerrar}>Aplicar</Button>}
>
  <Checkbox defaultSelected>Solo lo que hay en stock</Checkbox>
  <Checkbox>Solo piezas de oro</Checkbox>
</Dropdown>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode \| ((close: () => void) => ReactNode)`	—
`title`obligatoria	`string`	Titulo del panel. Obligatorio: es lo que se anuncia al abrirlo, aunque se pida no enseñarlo con `hiddenTitle`.
`trigger`obligatoria	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	Lo que abre el panel. Tiene que ser enfocable: un boton.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`footer`	`ReactNode \| ((close: () => void) => ReactNode)`	—
`hiddenTitle`	`boolean`	—
`offset`	`number`	—
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	—
`openOn`	`DropdownOpenOn`	Con que se abre. Por defecto `'press'`. Con `'contextmenu'` es el clic derecho (o la tecla de menu) y el menu del navegador no sale; el panel se coloca junto al elemento, no bajo el cursor. El nombre es el MODO: el ELEMENTO que abre es `trigger`.
`placement`	`Placement`	—
`width`	`string`	Ancho del panel. Por defecto se ajusta al contenido.

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

En el banco de pruebas

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