Todos los componentes (204)

Índice de la página

Navegación · TableOfContents · .amset-toc

Qué es y cuándo usarlo

El índice de una página larga: las secciones en una lista de enlaces, con la que se está leyendo marcada. Al pulsar una, la página baja hasta ella y el foco se va con ella.

Cuándo usarlo

Fichas, condiciones, guías de ayuda: páginas de varias pantallas de alto con secciones que tienen su id.
indented en una sección para un apartado dentro de otro.
hiddenLabel cuando ya se ve que es un índice y el título estorba: el nombre lo sigue teniendo para el lector.
offset con una cabecera fija: los píxeles que tapa, para que la sección no quede debajo de ella al saltar.

Cuándo no

Para ir a otras páginas de la aplicación: SideNav o TopBar.
Para enseñar una sección cada vez en lugar de toda la página: Tabs o Accordion.

Teclado: Tab recorre los enlaces; Intro lleva a la sección y le pasa el foco, así que el siguiente Tab sigue por dentro de ella y no vuelve al índice. Con Control, Cmd, Mayúsculas o Alt el clic lo lleva el navegador (abrir en otra pestaña o ventana).

Accesibilidad: es un nav nombrado por su título («En esta página» por defecto). Son enlaces de verdad (href="#seccion"): se copian, se abren en otra pestaña y funcionan sin JavaScript, y al pulsar se actualiza la dirección sin tocar el estado del historial, que es del enrutador (con él vacío, el enrutador de la aplicación pierde la cuenta al volver atrás). La sección que se lee lleva aria-current="true" y se marca con la raya y el peso además del color. La marcada es la última que ha pasado de la raya de lectura (a un 30 % del alto de la ventana), no la primera que asoma.

Aspecto fino: variables CSS --amset-toc-*: -font, -font-nested, -indent, -padding-block, -padding-inline. El tamaño mueve el cuerpo de letra, el relleno y la sangria de las subsecciones.

Cómo se ve

<TableOfContents
  label="En esta pagina"
  sections={[
    { key: 'que', label: 'Que es' },
    { key: 'teclado', label: 'Teclado', indented: true },
  ]}
/>

Props

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

Prop	Tipo	Para qué sirve
`sections`obligatoria	`readonly AnchorSection[]`	—
`active`	`string`	Controlado: que seccion se marca. Sin esto lo decide lo que se ve.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`hiddenLabel`	`boolean`	El titulo solo para el lector de pantalla.
`label`	`string`	Titulo del indice. Es lo que nombra la navegacion.
`offset`	`number`	Cuanto tapa por arriba una cabecera fija, en pixeles. Al pulsar una entrada la seccion se queda DEBAJO de la cabecera, no tapada por ella, y la raya de lectura se cuenta desde su borde de abajo. Por defecto, 0.
`onChange`	`(key: string) => void`	—
`size`	`"sm" \| "md" \| "lg"`	El cuerpo de letra y el relleno de cada entrada.

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-toc-font`	`var(--amset-text-sm)`
`--amset-toc-font-nested`	`var(--amset-text-xs)`
`--amset-toc-padding-block`	`var(--amset-space-1)`
`--amset-toc-padding-inline`	`var(--amset-space-3)`
`--amset-toc-indent`	`var(--amset-space-6)`

Cómo se cambia

.amset-toc {
  --amset-toc-font: ...;
  --amset-toc-font-nested: ...;
}

En el banco de pruebas

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