Todos los componentes (204)

Visita guiada

Capas · Tour

Qué es y cuándo usarlo

La visita de bienvenida: se ilumina una cosa de la pantalla, se explica en un globo y se pasa a la siguiente. La luz se vuelve a medir al desplazarse y al cambiar el tamaño de la ventana, así que no se queda señalando donde estaba la cosa hace un momento.

Cuándo usarlo

La primera vez que alguien entra en una pantalla con varias piezas que no se explican solas.
El target de cada paso es un selector CSS de lo que se señala; si queda fuera de la vista, la página se desplaza hasta él. Un paso sin target, o cuyo objetivo no existe en la página, sale en el centro en vez de desaparecer.
Controlada con index y onStepChange si la aplicación lleva el paso (para retomarla, por ejemplo); si no, lo lleva ella y cada vez que se abre empieza por el primero.

Cuándo no

Una ayuda de una frase sobre un botón: Tooltip.
Un proceso que hay que completar paso a paso (un alta, un pedido): Wizard.
Una lista de cosas por hacer para dejar la cuenta lista: OnboardingList.

Teclado: al abrir, el foco entra en el globo. Tab recorre Saltar, Anterior y Siguiente y vuelve a empezar sin alcanzar nada de la página de detrás, que queda inerte; al avanzar, el foco se queda en Siguiente, así que la visita entera se recorre a base de Intro. En el último paso, Siguiente pasa a Terminar, que avisa a onFinish antes de cerrar. Siempre se puede salir: con Saltar, con Escape o pulsando fuera, y todas avisan a onClose.

Accesibilidad: el globo es un diálogo con el título del paso como nombre y el contenido como descripción, y enseña por dónde va («2 de 4»). Cada paso nuevo se anuncia en una región status («Paso 2 de 4: Afina con los filtros») sin mover el foco. En el primer paso, Anterior está apagado.

Aspecto fino: sin variables propias. Se ajusta con las clases amset-tour__* (el velo, el foco de luz y el globo) y la de todos los flotantes, amset-floating.

Cómo se ve

Buscar en el catálogo

<Tour
  open={abierta}
  onClose={() => setAbierta(false)}
  steps={[
    { key: 'buscar', target: '#buscador', title: 'Busca cualquier pieza', content: 'Por nombre o por referencia.' },
    { key: 'carrito', target: '#carrito', title: 'Tu carrito', content: 'Con el total a la vista.' },
  ]}
/>

Props

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

Prop	Tipo	Para qué sirve
`onClose`obligatoria	`() => void`	Se llama al saltar, al cerrar con Escape y al terminar.
`open`obligatoria	`boolean`	—
`steps`obligatoria	`readonly TourStep[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`finishText`	`string`	—
`index`	`number`	—
`nextText`	`string`	—
`onFinish`	`() => void`	Solo cuando se llega al final, ademas de `onClose`.
`onStepChange`	`(index: number) => void`	—
`previousText`	`string`	—
`skipText`	`string`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

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