کامپوننت‌ها
راهنمای قدم‌به‌قدم
معرفی بخش‌های تازهٔ محصول به کاربر، مرحله به مرحله، با روشن کردن همان بخش.
import { Tour } from "@kashi-ui/react";نمونه
۱۲ سفارش در انتظار
<Tour open={open} onOpenChange={setOpen} steps={[
{ target: "#search", title: "جستجوی سریع", content: "نام مشتری یا شمارهٔ سفارش را بنویسید." },
{ target: "#export", title: "خروجی اکسل", content: "فهرست فیلترشده را دانلود کنید." },
]} />راهنما را کوتاه نگه دارید (سه تا پنج مرحله) و همیشه امکان «رد کردن» بدهید. بهتر است فقط یک بار، برای کاربر تازه یا بخش تازه، نمایش داده شود.
| نام | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
steps | { target, title, content }[] | — | target یک CSS selector است |
open / onOpenChange | boolean / (open) => void | — | |
onFinish | () => void | — | پس از آخرین مرحله |
labels | { next?, prev?, done?, skip?, step? } | — | متن دکمه‌ها |
دسترس‌پذیری
هر مرحله یک role="dialog" غیرمودال با عنوان و توضیح است و فوکوس به آن می‌رود. Esc می‌بندد، ←→ بین مرحله‌ها حرکت می‌کند و پس از پایان فوکوس به جای قبلی برمی‌گردد.