OnboardingSteps

Karta pierwszego uruchomienia z tym, co trzeba skonfigurować, postępem czytelnika i przyciskiem przy każdym kroku. Przekaż isDone z prawdziwych danych, aby krok był zrobiony, gdy rzecz istnieje, a nie gdy ktoś go odhaczył.

OnboardingSteps
OnboardingStep

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: OnboardingSteps

First steps

Add a project, done
A folder with a repository. The base branch and the commit style are found for you.
Connect a task tracker, to do
Your tasks in one list.
Find agents, to do
Looks for installed command line agents. The first try fails on purpose.
Install skills, to do
Ready instructions for agents, matched to the project.
Try the keyboard, to do
Press ? anywhere to see every shortcut. This one has a long title to show how text wraps in a narrow column.

Noc, podgląd: OnboardingSteps

First steps

Add a project, done
A folder with a repository. The base branch and the commit style are found for you.
Connect a task tracker, to do
Your tasks in one list.
Find agents, to do
Looks for installed command line agents. The first try fails on purpose.
Install skills, to do
Ready instructions for agents, matched to the project.
Try the keyboard, to do
Press ? anywhere to see every shortcut. This one has a long title to show how text wraps in a narrow column.

Wysoki kontrast, podgląd: OnboardingSteps

First steps

Add a project, done
A folder with a repository. The base branch and the commit style are found for you.
Connect a task tracker, to do
Your tasks in one list.
Find agents, to do
Looks for installed command line agents. The first try fails on purpose.
Install skills, to do
Ready instructions for agents, matched to the project.
Try the keyboard, to do
Press ? anywhere to see every shortcut. This one has a long title to show how text wraps in a narrow column.

UżycieLink do sekcji Użycie

tsx

import { OnboardingSteps, OnboardingStep } from '@skribly/ui/onboarding'

tsx

<OnboardingSteps title="First steps" doneLabel="done" todoLabel="to do"
  progressLabel={(done, total) => `${done} of ${total} done`}
  completeMessage="All set">
  <OnboardingStep title="Add a project" isDone={projects.length > 0} actionLabel="Add project" onAction={add} />
</OnboardingSteps>

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ść

Region nazwany swoim tytułem, z paskiem postępu, którego wartość jest odczytywana słowami.
Każdy wiersz mówi „gotowe” albo „do zrobienia” po tytule, a gotowy wiersz pokazuje też znacznik i przekreślenie.
Każda akcja ma nazwę razem z wierszem, na przykład „Connect, Connect a task tracker”.
Błędy mają ikonę i słowo, a komunikat o ukończeniu jest ogłaszany w trybie polite.

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