Todos los componentes (244)

Encabezado de página

Navegación · PageHeader · .amset-page-header

Qué es y cuándo usarlo

La cabecera de una pantalla: de dónde vengo (migas), dónde estoy (título y estado), de qué va (descripción) y qué puedo hacer aquí (acciones).

Cuándo usarlo

Arriba del contenido de cada pantalla de gestión: la ficha de un pedido, el listado de clientes.
crumbs para las migas, description debajo del título y actions a la derecha.
state para una Tag al lado del título («Pendiente de envío»); media para un avatar o un icono delante.
footer para lo que va pegado a la cabecera: un buscador, unas pestañas, unos filtros.
headingLevel={2} y separate={false} cuando va dentro de otra cosa (un panel, un diálogo) que ya tiene su h1.

Cuándo no

Para la barra de la aplicación, igual en todas las pantallas: TopBar.
Para el título de un bloque dentro de la pantalla: el title de Card o de DataList.

Teclado: no tiene teclado propio; se recorren las migas y las acciones que lleve, en ese orden.

Accesibilidad: va en un header y el título es un encabezado de verdad, h1 por defecto: es lo primero que busca quien navega por encabezados, así que solo puede haber uno por página. Las migas van en su propio nav, con la página actual marcada.

Aspecto fino: variables CSS --amset-heading-*: -description, -gap, -row-gap, -text-min, -title. El tamaño mueve el cuerpo del titulo y de la descripcion, y los huecos.

Cómo se ve

<PageHeader
  title="Pedido 4821"
  description="Entregado el 3 de octubre"
  actions={<Button variant="outline">Descargar factura</Button>}
/>

Props

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

Prop	Tipo	Para qué sirve
`title`obligatoria	`string`	—
`actions`	`ReactNode`	Botones de la pantalla, alineados a la derecha.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`crumbs`	`readonly Crumb[]`	Ruta hasta aqui. Se pinta encima del titulo.
`description`	`ReactNode`	Debajo del titulo: de que va la pantalla, en una linea.
`footer`	`ReactNode`	Debajo de todo: pestañas, filtros, una barra de busqueda.
`headingLevel`	`3 \| 2 \| 1`	Nivel del encabezado. `1` casi siempre: es el titulo de la pantalla y solo puede haber uno por pagina.
`media`	`ReactNode`	Encima del titulo, a la izquierda: un avatar, un icono de seccion.
`mediaTile`	`boolean`	Pinta `media` en una baldosa con el color de acento, como la del menu lateral. Pensado para un icono de seccion.
`separate`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	El cuerpo del titulo y de la descripcion, y los huecos.
`state`	`ReactNode`	Al lado del titulo: una etiqueta de estado, un identificador.

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-heading-title`	`var(--amset-text-xl)`
`--amset-heading-description`	`var(--amset-text-base)`
`--amset-heading-gap`	`var(--amset-space-3)`
`--amset-heading-row-gap`	`var(--amset-space-4)`
`--amset-heading-text-min`	`12rem`

Cómo se cambia

.amset-page-header {
  --amset-heading-title: ...;
  --amset-heading-description: ...;
}

En el banco de pruebas

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