Tour
A short guided walk over the real interface, one spotlight at a time.
SourcePackage @kerf-js/veneer
Preview
tsx
import { state } from '@kerf-js/core'import { Button, Row, Stack, Tour } from '@kerf-js/veneer'export function Dashboard() { const open = state(false) return ( <Stack gap="group" align="center" > <Row gap="related"> <Button data-tour="new" icon="plus" > New project </Button> <Button data-tour="deploys" emphasis="outline" tone="neutral" > Deploys </Button> <Button data-tour="team" emphasis="outline" tone="neutral" > Team </Button> </Row> <Button emphasis="link" onClick={() => (open.value = true)} > Take the tour </Button> <Tour steps={TOUR_STEPS} open={open} /> </Stack> )}const firstDeployDescription = 'Connect a repository and your first ' + 'deploy runs in about a minute.'const TOUR_STEPS = [ { target: '[data-tour="new"]', title: 'Start a project', body: firstDeployDescription, }, { target: '[data-tour="deploys"]', title: 'Follow every deploy', body: 'Failed ones land here first, with their logs.', }, { target: '[data-tour="team"]', title: 'Bring your team', body: 'Invite people and choose what they can do.', },]Installation
npm install @kerf-js/veneerUsage
tsx
import { Tour } from '@kerf-js/veneer'Accessibility
- →
- Next step
- ←
- Previous step
- Esc
- Ends it and returns focus
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | The element id. One is made for you if you leave it out. |
steps | TourStep[] | — | A target selector, a title and a body. |
open | boolean | State<boolean> | — | Whether it runs: a state or a value. |
| Event | Type | Default | Description |
|---|---|---|---|
onDone | (() => void) | — | It ran to the end. |
onSkip | (() => void) | — | It was skipped. |
onStepChange | ((index: number) => void) | — | Called with the step's index. |