الحالة الفارغة

نظرة عامة

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

استخدامات متعددة

النمط نفسه يخدم عدة سياقات: لا نتائج، قائمة فارغة، أو خطأ اتصال.

التركيب

أربعة أجزاء بترتيب ثابت: رسم توضيحي، ثم عنوان (headline)، ثم رسالة (body)، ثم زر الاسترداد الداكن. المسافات بينها من نظام المسافات.

السلوك

الحالة الفارغة تعرض إجراء استرداد واحدا واضحا هو الهدف التفاعلي الوحيد فيها: زر قابل للتركيز بلوحة المفاتيح ويُفعّل بمفتاحي Enter وSpace، مع مخطط تركيز واضح عند التنقّل. الرسم التوضيحي والعنوان والرسالة قراءةٌ فقط، فيبقى انتباه المستخدم موجّها للخطوة التالية. عند التحويم أو الضغط يعطي الزر تغذية بصرية خفيفة عبر رموز الحركة.

المحتوى

افعل ولا تفعل

الشيفرة

الحالة الفارغة تُستورد من حزمة المكوّنات: رسم توضيحي، عنوان، رسالة، وزر استرداد داكن (inverse). الاستخدام في React أولا، ثم قلب التطبيق المبني من الرموز.

import { EmptyState, Button } from "@mercato/components";

<EmptyState
  glyph="inventory_2"
  title="لا طلبيات بعد"
  message="ابدأ بإضافة أول طلبية لهذا العميل."
  action={<Button variant="inverse" icon="add">أضف طلبية</Button>}
/>

// Every surface, circle, and text color comes from a token.
<div className="grid place-items-center gap-5 px-6 py-10 text-center"
     style={{ backgroundColor: "var(--color-bg-base-canvas)", borderRadius: "var(--shape-surface-base)" }}>
  <span className="grid h-24 w-24 place-items-center rounded-full"
        style={{ backgroundColor: "var(--color-bg-base-section)", color: "var(--color-fg-base-tertiary)" }}>
    <span className="material-symbol text-[3rem]">{glyph}</span>
  </span>
  <p style={{ ...role("headline", "sm", "strong"), color: "var(--color-fg-base-primary)" }}>{title}</p>
  <p className="max-w-[20rem] text-muted">{message}</p>
  {action /* the dark btn-inverse recovery button */}
</div>

لا تحمل الحالة الفارغة قيمة لون أو استدارة مباشرة، والعنوان يأخذ حجمه من role("headline"): الوضع الداكن وإعادة العلامة يسريان تلقائيا عبر الرموز.

مكوّنات ذات صلة