الجولة الإرشادية

تجريبي

احصل على Ritla UI

خطوات قصيرة تشير إلى أجزاء الشاشة وتشرحها، مع إبراز الجزء وتعتيم ما حوله.

افتح في Figma

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

أضف المكوّن
$ npx ritla add guided-tour
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/guided-tour
الاعتماديات التي يضيفها
@phosphor-icons/react
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

guided-tour.tsx

import { GuidedTour } from "@/components/ui/guided-tour";<GuidedTour open={open} onOpenChange={setOpen} steps={[{ target: balanceRef, title: "Your balance", description: "See all your accounts in one place." }]} />

مرجع الخصائص

GuidedTour

الخاصية	النوع	الافتراضي	الوصف
`steps`	`TourStepData[]`	لا يوجد	لكل خطوة `target` (مرجع العنصر) و`title` و`description` و`shape`.
`open / onOpenChange`	`boolean / (open) => void`	لا يوجد	حالة الجولة.
`labels`	`TourLabels`	لا يوجد	العدّاد والأزرار بلغة الصفحة.

TourStep

الخاصية	النوع	الافتراضي	الوصف
`placement`	`"top" \| "bottom"`	`"bottom"`	خاصية Placement.
`arrow`	`"start" \| "center" \| "end"`	`"center"`	خاصية Arrow.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Escape`	يغلق الجولة في أي خطوة.
`Tab`	ينتقل بين أزرار الخطوة.

ARIA

كل خطوة نافذة حوارية غير حاجبة باسم عنوانها، وينتقل التركيز إليها.
اجعلها أربع خطوات أو أقل، واعرضها مرة واحدة.

ملاحظات العربية والاتجاه

ينعكس

الأزرار والنقاط تتبع اتجاه الصفحة.

لا ينعكس

الإبراز يتبع موضع العنصر على الشاشة.

الأرقام: العدّاد كما تمرّره labels.
الخط العربي: العنوان body-16 Semibold، والنص body-14.