'/%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
Sheet
Un panel que entra desde un borde y sigue al dedo: deslízalo para cerrarlo, o arrástralo entre puntos de anclaje. Desde abajo en teléfonos, centrado o desde un lado en escritorio, con un asa, un título, una descripción y acciones fijas.
import { SheetTrigger, Sheet, ActionSheet } from '@alea/ui';
Ejemplos
Hoja inferior
Se abre desde abajo con un asa; deslízala hacia abajo, toca afuera o presiona Escape para cerrar. Las acciones van en el pie, donde llegan los pulgares.
Puntos de anclaje y posiciones
snapPoints={[0.5, 1]} abre a media altura y se arrastra hasta la altura completa; position la pone arriba, a un costado o en el centro.
ActionSheet
Una lista corta de acciones en una hoja inferior, con Cancelar aparte. Cada acción la cierra.
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-bg…--alea-border…--alea-border-strong…--alea-surface-overlay…--alea-text…--alea-text-muted…
Space
--alea-space-2…
Radius
--alea-radius-lg…--alea-radius-xl…
Type
--alea-font-family-body…--alea-font-size-lg…--alea-font-size-sm…--alea-font-weight-semibold…
Shadow
--alea-shadow-pop…
Layer
--alea-z-modal…
Props
Sheet props
Un panel que entra desde un borde y sigue al dedo: deslízalo para cerrarlo, o arrástralo entre puntos de anclaje. Pensado para teléfonos; en escritorio funciona como un drawer.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-label | string | - | Nombre para lectores de pantalla cuando no hay título. |
children | ReactNode | - | El contenido. |
className | string | - | Clases extra para la hoja. |
description | ReactNode | - | Una línea bajo el título. |
footer | ReactNode | - | Contenido fijo abajo: acciones. |
hideHandle | boolean | - | Oculta el asa de arrastre (se muestra en hojas inferiores y superiores). |
position | "start" | "end" | "bottom" | "center" | "top" | 'bottom' | De dónde viene la hoja: bottom (por defecto, teléfonos), top, start, end o center. |
preventDismissal | boolean | - | Deslizar y tocar afuera no la cierran (para trabajo sin guardar). |
snapPoints | (string | number)[] | - | Alturas donde se detiene, como fracciones de la pantalla o medidas CSS: [0.5, 1] abre a media altura y se puede arrastrar hasta completa. |
title | ReactNode | - | El título, leído cuando se abre la hoja. |
ActionSheet props
Una lista de acciones en una hoja inferior, con Cancelar aparte: Compartir, Duplicar, Eliminar. La forma móvil de mostrar un menú corto.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
actionsobligatoria | ActionSheetAction[] | - | Las acciones, de arriba abajo. Cada una cierra la hoja. |
triggerobligatoria | ReactNode | - | El botón que la abre. |
cancelLabel | ReactNode | - | El texto del botón de cancelar. Por defecto "Cancelar". |
description | ReactNode | - | Una línea bajo el título. |
isOpen | boolean | - | Estado abierto (controlado). |
onOpenChange | ((open: boolean) => void) | - | Se llama cuando se abre o se cierra. |
title | ReactNode | - | Un título corto sobre las acciones. |
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.
Sheet
- Variantes
positionstartendbottomcentertop- 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-sheet-overlay.alea-sheet-backdrop.alea-sheet.alea-sheet-content.alea-sheet-handle.alea-sheet-head.alea-sheet-title.alea-sheet-desc.alea-sheet-body.alea-sheet-foot- Atributos data
data-position=bottomdata-position=topdata-position=startdata-position=enddata-position=center
ActionSheet
- 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-action-sheet
Accesibilidad
- Un diálogo modal: el foco entra y se queda adentro; Escape cierra y el foco vuelve al disparador.
- El título nombra el diálogo; sin título, dale un aria-label.
- Deslizar nunca es la única salida: Escape, un toque en el fondo y tu propio botón Cerrar también funcionan (salvo con preventDismissal).
- El asa es decorativa y se oculta a los lectores de pantalla.
Teclado
| Tecla | Acción |
|---|---|
| Escape | Cierra |
| Tab | Recorre el interior |
Qué hacer y qué evitar
Hacer
- Úsalo para tareas cortas en teléfonos: compartir, filtros, un formulario rápido, una lista de acciones.
- Define puntos de anclaje cuando el contenido es largo: [0.5, 1] abre a la mitad.
- Deja la acción principal en el pie, donde llega el pulgar.
Evitar
- No apiles más de dos sheets.
- No uses preventDismissal salvo que salir haga perder trabajo.