Todos los componentes (204)

Panel lateral

Capas · Drawer · .amset-panel

Qué es y cuándo usarlo

Un panel que entra por un lado de la pantalla: filtros, el detalle de una fila, un formulario corto. Por dentro es un diálogo modal, así que el foco entra, se queda dentro y vuelve al disparador al cerrar.

Cuándo usarlo

Filtros de un listado, con «Aplicar» y «Limpiar» en el pie.
El detalle de una fila sin perder el listado de vista.
side: end (por defecto) o start, que siguen al idioma, y top o bottom.
actions para los botones del pie: recibe la función que cierra el panel.
loading mientras llega el contenido: el cuerpo enseña un esqueleto y el título y los botones se quedan.
dismissable={false} (pulsar fuera no cierra) o keyboardDismissDisabled (Escape no cierra) para un formulario a medias que no debe perderse por un clic de más.

Cuándo no

Una decisión corta en el centro: Dialog.
Un panel pequeño pegado al botón que no bloquea la página: Dropdown.
Si es una página entera con su propia dirección, no es un panel: es navegar.

Teclado: al abrir, el foco entra y se queda dentro. Escape cierra y el foco vuelve al disparador; pulsar fuera también cierra. Si se apagan las dos salidas, lo de dentro tiene que ofrecer una.

Accesibilidad: es un <dialog> modal del navegador, con el resto de la página inerte mientras está abierto. Se anuncia como dialog con el título como nombre y description como descripción accesible. El aspa está puesta por defecto (withCloseButton) y se llama con closeLabel («Cerrar el panel»). Mientras carga, el cuerpo va con aria-busy y anuncia loadingText («Cargando…»). Si el cuerpo se desplaza, coge el foco para poder recorrerlo con el teclado.

Aspecto fino: variables CSS --amset-panel-*: -width (a los lados: 20, 28 o 40 rem según el tamaño), -height (arriba y abajo), -padding, -background y -from, que es por dónde entra. Cada lado trae el suyo: el de abajo sube, el de arriba baja y los de los lados entran de lado. El velo es el ::backdrop del navegador. El cuerpo es lo único que se desplaza.

Cómo se ve

<Drawer title="Filtros" trigger={<Button variant="outline">Abrir filtros</Button>}>
  <Filtros />
</Drawer>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`title`obligatoria	`string`	—
`actions`	`(close: () => void) => ReactNode`	Botones del pie. Recibe `close`, como el diálogo.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`closeLabel`	`string`	—
`description`	`string`	—
`dismissable`	`boolean`	Pulsar fuera cierra. Por defecto si. En `false`, el panel solo se va por sus propios botones: para un formulario a medias que no debe perderse por un clic de mas.
`keyboardDismissDisabled`	`boolean`	Escape cierra. Por defecto si. Mismo caso que el anterior, y con la misma advertencia: si se apagan los dos, lo que esta DENTRO tiene que ofrecer una salida, o quien no usa raton se queda encerrado.
`loading`	`boolean`	El contenido esta llegando. En lugar de `children` se enseña un esqueleto, y el cuerpo se marca ocupado. El titulo y los botones se quedan: quien lo abrio sabe de que va y puede cerrarlo sin esperar.
`loadingText`	`string`	Lo que se anuncia al lector mientras carga. Por defecto, «Cargando…».
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	—
`side`	`PanelSide`	Por qué lado entra, y por el que se desliza al aparecer. `start` y `end` siguen el idioma.
`size`	`"sm" \| "md" \| "lg"`	A los lados, 20, 28 o 40 rem de ancho; arriba y abajo, 30, 50 u 80 % del alto.
`trigger`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	—
`withCloseButton`	`boolean`	—

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-panel-width`	`28rem`
`--amset-panel-height`	`50vh`
`--amset-panel-padding`	`var(--amset-space-5)`
`--amset-panel-background`	`var(--amset-surface)`
`--amset-panel-from`	`translateX(16px)`

Cómo se cambia

.amset-panel {
  --amset-panel-width: ...;
  --amset-panel-height: ...;
}

En el banco de pruebas

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