Tour

Przewodnik, który przyciemnia stronę, obwodzi jeden element na każdym kroku i objaśnia go w dymku obok. Użyj go raz po rejestracji albo z menu pomocy; kroki, których elementu brakuje, są pomijane i nie są liczone.

Tour
TourStep

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: Tour

Noc, podgląd: Tour

Wysoki kontrast, podgląd: Tour

UżycieLink do sekcji Użycie

tsx

import { Tour, TourStep } from '@skribly/ui/onboarding'

tsx

<Tour isOpen={open} onOpenChange={setOpen}
  stepLabel={(n, total) => `Step ${n} of ${total}`}
  nextLabel="Next" backLabel="Back" finishLabel="Done" closeLabel="Close the guide">
  <TourStep title="A quick look around">Four stops, about a minute.</TourStep>
  <TourStep target="search" title="Search everything">Finds views and actions.</TourStep>
</Tour>
<IconButton data-tour="search" label="Search">…</IconButton>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Dymek jest oknem dialogowym nazwanym tytułem kroku i opisanym jego tekstem: strona za nim jest nieaktywna dla czytników ekranu i wskaźnika, a Tab zostaje w dymku.
Fokus przechodzi na przycisk Dalej na każdym kroku.
Klawisze strzałek zmieniają krok, Escape zamyka przewodnik, a fokus wraca na element, który go otworzył.
Każdy krok jest ogłaszany w regionie na żywo typu polite.
Na ekranach węższych niż 640 px dymek przykleja się do dołu, a przy ograniczonym ruchu animacje zatrzymują się.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.