قائمة المسار

تجريبي

احصل على Ritla UI

خطوات المسار وعدد من وصل إلى كل منها، ونسبتها من الخطوة الأولى، والتغيّر مقارنة بالفترة السابقة.

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

funnel-list.tsx

import { FunnelList } from "@/components/ui/funnel-list";<FunnelList aria-label="Transfer funnel" steps={[{ label: "Opened app", count: 2341, change: 10.7 }, { label: "Sent", count: 258, change: 3.3 }]} />

مرجع الخصائص

FunnelList

الخاصية	النوع	الافتراضي	الوصف
`steps`	`{ label, count, countLabel?, change? }[]`	لا يوجد	الخطوات بالترتيب؛ الأولى 100%.
`aria-label`	`string`	لا يوجد	يسمّي القائمة.

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

ARIA

قائمة مرتبة، والنسبة نص، فالشريط زخرفي.

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

ينعكس

الأشرطة تمتلئ من اليمين.

لا ينعكس

النسب والتغيّرات تبقى من اليسار إلى اليمين.

الأرقام: النسب تتبع numerals في RitlaProvider.
الخط العربي: label-14 Medium للخطوة وnumeric-14 Medium للنسبة.