حالة القائمة
حالات القائمة: هياكل الصفوف بالتخطيط الحقيقي أثناء التحميل، وسبب الفراغ، وخطأ مطمئن.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add list-stateويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/list-stateالاعتماديات التي يضيفها
@phosphor-icons/reactأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { ListState } from "@/components/ui/list-state";<ListState state="error" title="Could not load transactions" description="We could not reach your account. Your money is safe." action={<Button size="xs" variant="outline">Try again</Button>} />مرجع الخصائص
ListState
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
state | "loading" | "empty" | "error" | لا يوجد | خاصية State. |
title / description / action | ReactNode | لا يوجد | كما في Card state. |
rows | number | 4 | عدد هياكل الصفوف أثناء التحميل. |
loadingLabel | ReactNode | لا يوجد | ما يُقرأ أثناء التحميل. |
إمكانية الوصول
ARIA
- مثل Card state: منطقة مشغولة أثناء التحميل وتنبيه عند الخطأ.
ملاحظات العربية والاتجاه
ينعكس
- هياكل الصفوف تنعكس مثل الصفوف التي تمثلها: الصورة يمينًا.
لا ينعكس
- الرسالة في المنتصف.
- الأرقام
- لا أرقام خاصة به.
- الخط العربي
label-14Semibold للعنوان وbody-12للوصف.