'/%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}
Navegación
Anchor
Navegación dentro de la página que sigue la sección que estás leyendo.
import { Anchor } from '@alea/ui';
Ejemplos
Anchor
Los enlaces siguen la sección a la vista. Haz scroll en la página para verlo moverse.
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-accent…--alea-border…--alea-text…--alea-text-faint…--alea-text-muted…
Type
--alea-font-family-body…--alea-font-size-2xs…--alea-font-size-sm…--alea-font-tracking-eyebrow…--alea-font-weight-medium…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…
Props
Anchor props
Navegación dentro de la página que sigue la sección que estás leyendo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
itemsobligatoria | { id: string; label: ReactNode; level?: 2 | 3 | undefined; }[] | - | Las secciones: id del título o sección, y el texto del enlace. Anida con level 2 o 3. |
className | string | - | Clases extra para el elemento raíz. |
offset | number | 80 | Espacio que ocupa un encabezado fijo, para que la sección activa sea la correcta. Por defecto 80. |
title | ReactNode | - | Título sobre los enlaces. Por defecto "En esta página". |
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.
- Estados
- Hover (CSS)
- Motion
- tint
- 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-anchor.alea-anchor-title.alea-anchor-link- Atributos data
data-level=3
Accesibilidad
- Un landmark de navegación; la sección a la vista se marca con aria-current="location".
Teclado
| Tecla | Acción |
|---|---|
| Tab | Se mueve entre los enlaces a secciones |
| Enter | Hace scroll hasta la sección |
Qué hacer y qué evitar
Hacer
- Úsalo en páginas largas con tres o más secciones.
- Usa los mismos textos que los títulos.
Evitar
- No lo uses para navegar el sitio: usa NavigationMenu o la barra lateral.
- No enlaces a secciones ocultas.