'/%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
PageHeader y PageActions
La parte superior de una página: ruta o volver, un título con imagen y datos, un subtítulo, la acción principal, acciones secundarias que se pliegan en un menú en teléfonos, y pestañas; fijo y compacto cuando lo necesites. PageActions cierra una página de formulario; FooterHelp lleva a la ayuda.
import { PageHeader, PageActions, FooterHelp } from '@alea/ui';
Ejemplos
Encabezado de página
Breadcrumbs, volver, título, meta, subtítulo, la acción principal y las secundarias. Cambia el tamaño de la ventana: en teléfonos las acciones secundarias se pliegan en un menú Más y la principal ocupa todo el ancho.
Order #1042
Northwind Traders · 4 items · $1,240
Compacto con pestañas
compact para apps densas; las pestañas van debajo del encabezado.
Customers
2,481 people
Acciones de página y ayuda
PageActions cierra una página de formulario (principal a la derecha, secundaria a la izquierda, apiladas en teléfonos); FooterHelp apunta a más ayuda.
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-text-muted…
Space
--alea-space-1…--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-6…
Type
--alea-font-family-body…--alea-font-size-2xl…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xl…--alea-font-tracking-tight…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Layer
--alea-z-sticky…
Props
PageHeader props
La parte superior de una página: breadcrumbs o volver, título, subtítulo, meta, acciones y pestañas. Las acciones secundarias se pliegan en un menú en teléfonos.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
titleobligatoria | ReactNode | - | El título de la página (un h1 por defecto). |
actions | ReactNode | - | Las acciones principales (normalmente un botón primary). Siguen visibles en teléfonos. |
back | string | (() => void) | - | A dónde va Volver: un href, o una función. Muestra un botón de flecha antes del título. |
backLabel | string | - | La etiqueta del botón de volver. Por defecto "Volver". |
breadcrumbs | { label: ReactNode; href?: string; }[] | - | La ruta sobre el título. |
className | string | - | Clases extra. |
compact | boolean | - | Espaciado más ajustado y un título más pequeño, para apps densas. |
headingLevel | 2 | 3 | 1 | 1 | Nivel de título. Por defecto 1. |
media | ReactNode | - | Un avatar, ícono o miniatura antes del título. |
meta | ReactNode | - | Badges y datos junto al título: estado, fechas, responsable. |
secondaryActions | PageAction[] | - | Más acciones: se muestran como botones desde 768 px, plegadas en un menú Más en teléfonos. |
sticky | boolean | - | Se queda fijo arriba al hacer scroll, y recibe un borde una vez fijo. |
subtitle | ReactNode | - | Una línea bajo el título. |
tabs | ReactNode | - | Pestañas o un control segmentado bajo el encabezado. |
PageActions props
La fila de acciones al final de una página de formulario: principal a la derecha, secundaria a la izquierda. De ancho completo y apiladas en teléfonos.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | Clases extra. |
primary | ReactNode | - | La acción principal, a la derecha. |
secondary | ReactNode | - | Otras acciones, a la izquierda (Eliminar, Archivar). |
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.
PageHeader
- 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-page-header-secondary.alea-page-header-more.alea-page-header.alea-page-header-crumbs.alea-page-header-main.alea-page-header-back.alea-page-header-media.alea-page-header-titles.alea-page-header-title-row.alea-page-header-title.alea-page-header-meta.alea-page-header-subtitle- Atributos data
data-compactdata-stickydata-stuck
PageActions
- 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-page-actions.alea-page-actions-secondary.alea-page-actions-primary
FooterHelp
- 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-footer-help
Accesibilidad
- El título es un encabezado real (h1 por defecto; usa headingLevel cuando la página ya tiene uno).
- Volver es un botón con nombre; la ruta es un landmark de navegación con la página actual marcada.
- Las acciones secundarias son las mismas en un menú en teléfonos, así que no se pierde nada en pantallas pequeñas.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Recorre volver, la ruta y las acciones |
Qué hacer y qué evitar
Hacer
- Una acción principal en actions; el resto en secondaryActions.
- Mantén los títulos cortos; pon los datos en meta.
Evitar
- No pongas campos de formulario en el encabezado.
- No uses más de un h1 por página.