Code
<script lang="ts">
import { useTour, Tour, type TourStep } from 'svelora';
import { goto } from '$app/navigation';
const steps: TourStep[] = [
{ id: 'home', route: '/', target: '#hero', title: 'Welcome' },
{ id: 'settings', route: '/settings', target: '#prefs', title: 'Settings' }
];
const tour = useTour({
steps,
persist: true,
onStepChange: (index) => {
const route = steps[index]?.route;
if (route) goto(route);
}
});
</script>
<Button onclick={() => tour.start()}>Start tour</Button>
<Tour {steps} controller={tour} />
useTour
Headless controller สำหรับ Tour — เก็บ state แบบ reactive โดยไม่ render UI เอง เหมาะกับ multi-page tour เมื่อใช้ร่วมกับ persist และนำทาง route ใน onStepChange
ดูตัวอย่าง multi-page เต็มรูปแบบที่ /tour/multi
Interactive demo
Hero target — ขั้นตอนแรกจะ spotlight ตรงนี้
Closed Step 0
Options
| Name | Type | Description |
|---|---|---|
| steps | TourStep[] | Tour step definitions shared with <Tour />. |
| defaultStep | number | Initial step index. Default: 0. |
| persist | boolean | TourPersistOptions | Resume in-progress tours across reloads. |
| onStart | () => void | Called when the tour opens. |
| onComplete | () => void | Called when the last step finishes. |
| onSkip | () => void | Called when the user dismisses the tour. |
| onStepChange | (index: number) => void | Called after the active step changes. |
Controller API
| Name | Type | Description |
|---|---|---|
| isActive | boolean | Whether the tour is active. |
| currentIndex | number | Current step index. |
| currentStepData | TourStep | undefined | Current step object. |
| start() | () => void | Open the tour at the first enabled step. |
| stop() | () => void | Close the tour and clear persisted state. |
| next() | () => Promise<void> | Advance, honoring onBeforeNext guards. |
| prev() | () => Promise<void> | Go back, honoring onBeforePrev guards. |
| goTo(step) | (number | string) => Promise<void> | Jump to a step by index or id. |