Todos los componentes (204)

Tarjeta flotante

Capas · HoverCard · .amset-hovercard

Qué es y cuándo usarlo

Una tarjeta con más información que aparece al pasar el ratón por un enlace o al llegar a él con el teclado: el perfil de quien se menciona, la vista previa de una página, el resumen de un pedido.

Cuándo usarlo

Para ampliar lo que dice un enlace sin sacar a nadie de donde está: una mención, una referencia, un nombre de producto.
Cuando el contenido lleva enlaces o botones: la tarjeta se puede tocar.

Cuándo no

Para una frase de ayuda corta sobre un control: es un Tooltip.
Para lo imprescindible: en una pantalla táctil no hay «pasar el ratón», así que nada de lo que solo cuenta la tarjeta debería faltar fuera.
Para algo que hay que pulsar para abrir y que corta el paso: es un Dropdown o un Dialog.

Teclado: el disparador abre la tarjeta al recibir el foco, sin esperar, y Tab entra en ella porque va justo después. Tab hacia fuera la cierra y Escape la descarta sin mover el foco.

Accesibilidad: cumple WCAG 1.4.13: se descarta con Escape, se puede pasar el ratón por encima sin que desaparezca (closeDelay) y no se cierra sola mientras se usa. El disparador lleva aria-expanded y aria-controls, y la tarjeta es un grupo con el nombre de label. Con <a href> como disparador, quien no puede abrirla sigue llegando a donde apunta.

Aspecto fino: variable CSS --amset-hovercard-padding (el relleno de la tarjeta). Va en la capa superior con popover="manual", así que no cierra lo que haya abierto al lado.

Cómo se ve

La pieza la firma @aurelia, que lleva treinta años en el oficio.

<HoverCard
  label="Vista previa de Joyería Aurelia"
  trigger={<a href="/aurelia">@aurelia</a>}
  openDelay={300}
  closeDelay={250}
>
  <strong>Joyería Aurelia</strong>
  <p>Joyería de autor hecha a mano en Madrid desde 1987.</p>
</HoverCard>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	Lo que enseña la tarjeta. Es un EXTRA: lo imprescindible tiene que estar también fuera.
`label`obligatoria	`string`	Nombre de la tarjeta para el lector de pantalla: «Vista previa de Aurelia».
`trigger`obligatoria	`ReactElement<TriggerOwnProps, string \| JSXElementConstructor<any>>`	Lo que la abre: un enlace o un botón, siempre enfocable. Con un `<a>` de verdad, quien no puede pasar el ratón sigue llegando a donde apunta.
`align`	`Alignment`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`closeDelay`	`number`	Milisegundos de gracia al salir: es lo que deja llegar con el ratón hasta la tarjeta.
`defaultOpen`	`boolean`	—
`disabled`	`boolean`	—
`offset`	`number`	—
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	—
`openDelay`	`number`	Milisegundos con el ratón encima antes de aparecer. Con el teclado sale al momento.
`side`	`FloatingSide`	—
`width`	`string`	Ancho de la tarjeta. Por defecto 20 rem, y nunca más que la pantalla.

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-hovercard-padding`	`var(--amset-space-4)`

Cómo se cambia

.amset-hovercard {
  --amset-hovercard-padding: ...;
}

En el banco de pruebas

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