'/%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}
Avisos
Tour
Un recorrido guiado por una pantalla, un foco a la vez.
import { Tour } from '@alea/ui';
Ejemplos
Tour
Cada paso señala una parte de la página.
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-accent-strong…--alea-surface…--alea-text-muted…
Space
--alea-space-3…--alea-space-5…
Radius
--alea-radius-lg…--alea-radius-md…
Type
--alea-font-family-body…--alea-font-family-display…--alea-font-size-2xl…--alea-font-size-2xs…--alea-font-size-md…--alea-font-tracking-eyebrow…--alea-font-weight-light…--alea-font-weight-semibold…
Shadow
--alea-shadow-card…--alea-shadow-pop…
Motion
--alea-motion-duration-base…--alea-motion-duration-slow…--alea-motion-ease-out…
Props
Tour props
Un recorrido guiado por una pantalla: cada paso destaca un elemento y lo explica. Escape lo omite; el foco se queda en el paso.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
isOpenobligatoria | boolean | - | Si el recorrido está activo (controlado). |
onOpenChangeobligatoria | (open: boolean) => void | - | Se llama cuando empieza o termina. |
stepsobligatoria | TourStep[] | - | Los pasos: target (un selector CSS), title y content. |
onFinish | (() => void) | - | Se llama cuando termina el último paso. |
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.
- Motion
- rise
- 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-tour-overlay.alea-tour.alea-tour-spot.alea-tour-card.alea-tour-count.alea-tour-title.alea-tour-text.alea-tour-actions.alea-tour-spacer
Accesibilidad
- Cada paso es un diálogo; el foco va a Siguiente; Omitir siempre está disponible.
Teclado
| Tecla | Acción |
|---|---|
| Enter | Siguiente |
| Escape | Omite el recorrido |
Qué hacer y qué evitar
Hacer
- Limítalo a cinco pasos o menos.
Evitar
- No lo inicies en cada visita.