حالة البطاقة
ما تعرضه بطاقة الأداة أثناء تحميل بياناتها، أو حين لا يوجد شيء بعد، أو عند الفشل.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add card-stateويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/card-stateالاعتماديات التي يضيفها
@phosphor-icons/reactأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { CardState } from "@/components/ui/card-state";<CardState state="empty" title="No data yet" description="Your spending shows here after your first payment." action={<Button size="xs">Add money</Button>} />مرجع الخصائص
CardState
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
state | "loading" | "empty" | "error" | لا يوجد | خاصية State. |
title / description | ReactNode | لا يوجد | ما حدث وما يجب فعله. |
action | ReactNode | لا يوجد | الخطوة التالية: زر. |
icon | IconComponent | ChartBar / WarningCircle | الأيقونة في الدائرة. |
loadingLabel | ReactNode | “Loading…” | ما يُقرأ أثناء التحميل. |
إمكانية الوصول
ARIA
- التحميل منطقة مشغولة (
aria-busy) بتسمية مخفية، والهياكل مخفية. - الخطأ تنبيه يُقرأ فور ظهوره، والحالة الفارغة ليست كذلك.
ملاحظات العربية والاتجاه
ينعكس
- أشرطة عنوان التحميل تكون يمينًا.
لا ينعكس
- الرسالة والأيقونة في المنتصف.
- الأرقام
- لا أرقام خاصة به.
- الخط العربي
label-14Semibold للعنوان وbody-12للوصف.