'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Capas
Popover
Un panel flotante junto a su disparador, para formularios pequeños y detalles extra.
import { DialogTrigger, Popover, PopoverDialog } from '@alea/ui';
Ejemplos
Popover
Un formulario pequeño junto a su disparador.
Con flecha
showArrow apunta al disparador.
Ancho, descripción, pie y cerrar
size define el ancho (sm 240, md 320, lg 420 px, nunca más ancho que la pantalla); PopoverDialog acepta una descripción bajo el título, un pie cuya función recibe close para Cancelar y Aplicar, y showClose para un botón en la esquina.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border-strong…--alea-surface-raised…
Props
Popover props
Un panel flotante unido a un disparador; se cierra con Escape o un clic afuera. Tres anchos, una flecha opcional.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
motion | MotionProp | - | Cómo entra y sale: un preset (fade, scale, pop, rise, slide-up, blur...), false para ninguno, o { enter, exit, duration, easing, delay }. |
showArrow | boolean | - | Muestra la pequeña flecha que apunta al disparador. |
size | "sm" | "md" | "lg" | - | Ancho: sm (240 px), md (320 px) o lg (420 px). Por defecto: tan ancho como su contenido. |
PopoverDialog props
El contenido de un Popover con cosas interactivas (formularios, filtros, ajustes): un título, una descripción, un pie y un botón de cerrar.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Una línea bajo el título. |
footer | ReactNode | ((close: () => void) => ReactNode) | - | Botones abajo, por ejemplo Cancelar y Aplicar. Una función recibe close. |
showClose | boolean | - | Agrega un botón de cerrar en la esquina (Escape y un clic afuera lo cierran de todos modos). |
title | ReactNode | - | Título opcional arriba. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Popover
- Variantes
sizesmmdlg- Motion
- Acepta una prop motion para su entrada y salida.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-arrow- Atributos data
data-placement=bottomdata-placement=leftdata-placement=right
PopoverDialog
- Estados
- Hover
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-popover-dialog.alea-popover-head.alea-popover-title.alea-popover-close.alea-popover-desc.alea-popover-footer
Accesibilidad
- El contenido con controles va en un PopoverDialog, que maneja el foco y tiene título.
- Escape o un clic afuera lo cierra.
Teclado
| Tecla | Acción |
|---|---|
| Escape | Cierra |
| Tab | Recorre el contenido |
Qué hacer y qué evitar
Hacer
- Mantén los popovers cortos: unas líneas y una acción.
- Usa PopoverDialog con título cuando contiene un formulario.
Evitar
- No lo uses para contenido largo o crítico: usa Dialog.
- No pongas formularios largos en un popover: usa Dialog o Drawer.
- No abras popovers al pasar el mouse: para eso usa HoverCard o Tooltip.