'/%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}
Maquetación
AppShell
El marco de la app: un encabezado fijo, una barra lateral que se vuelve cajón en pantallas pequeñas, el área principal y un enlace para saltar.
import { AppShell, SidebarNav, SidebarGroup, SidebarLink } from '@alea/ui';
Ejemplos
AppShell
Encabezado, barra lateral y contenido. Achica la ventana: la barra lateral pasa a un drawer detrás del botón de menú.
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-chip-bg…--alea-chip-text…
Space
--alea-space-2…--alea-space-3…--alea-space-5…--alea-space-6…
Radius
--alea-radius-full…
Type
--alea-font-family-display…--alea-font-weight-light…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Layer
--alea-z-sticky…--alea-z-toast…
Component
--alea-shell-sidebar…
Props
AppShell props
El marco de la app: encabezado fijo, barra lateral, contenido con scroll y un skip link.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
brand | ReactNode | - | Logo o nombre del producto, arriba a la izquierda. |
className | string | - | Clases extra para el elemento raíz. |
collapseBelow | number | 900 | Por debajo de este ancho la barra lateral pasa a un drawer. Por defecto 900 px. |
headerEnd | ReactNode | - | Cosas a la derecha del encabezado: búsqueda, interruptor de tema, avatar. |
mainAs | "div" | "main" | 'main' | El elemento del contenido: main (por defecto), o div cuando el marco está dentro de una página que ya tiene un main (demos, embeds). |
sidebar | ReactNode | - | La navegación lateral (un SidebarNav). En pantallas pequeñas pasa a un drawer. |
sidebarWidth | number | 248 | Ancho de la barra lateral. Por defecto 248 px. |
SidebarGroup props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | Los SidebarLinks. |
title | ReactNode | - | Pequeño título en mayúsculas del grupo. |
SidebarLink props
Un enlace en la navegación lateral.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
end | ReactNode | - | Una cantidad o badge a la derecha. |
icon | ReactNode | - | Un ícono antes de la etiqueta. |
isCurrent | boolean | - | Marca la página actual (aria-current). |
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.
AppShell
- Variantes
mainAsdivmain- Estados
- Focus (CSS)
- 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-shell.alea-main.alea-skip-link.alea-shell-header.alea-shell-menu.alea-shell-brand.alea-shell-end.alea-shell-body.alea-shell-sidebar.alea-shell-main.alea-shell-drawer- Atributos data
data-custom-collapsedata-collapsed
SidebarNav
- 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-sidenav
SidebarGroup
- 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-sidenav-group.alea-sidenav-title
SidebarLink
- 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-sidenav-link.alea-sidenav-icon.alea-sidenav-label.alea-sidenav-end
Accesibilidad
- Encabezado, navegación y contenido principal son landmarks; el enlace para saltar va al contenido principal.
- La página actual se marca con aria-current.
- En pantallas pequeñas la barra lateral se abre en un cajón que atrapa el foco y se cierra con Escape.
Teclado
| Tecla | Acción |
|---|---|
| Tab (el primero) | Muestra el enlace para saltar |
| Escape | Cierra la navegación móvil |
Qué hacer y qué evitar
Hacer
- Agrupa los enlaces bajo títulos cortos.
- Marca la página actual con isCurrent.
Evitar
- No anides más de dos niveles en la barra lateral: usa un Tree o una página.