قائمة الإجراءات

نظرة عامة

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

الخصائص

الخاصية الوحيدة هي hasDestructiveAction: عند تفعيلها تُضاف فاصلة تليها عنصر إجراء مدمّر واحد، بعد كل العناصر الأخرى.

الحالات

تعرّف قائمة الإجراءات ثلاث حالات: الافتراضية، والنشطة، والتركيز.

السلوك

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

المحتوى

تسمية العنصر تكون فعلا فقط حين يكون السياق واضحا، وفعلا مع اسم حين يوجد احتمال لبس، مثل: تعديل، تغيير الحالة.

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

• زر الكببة بحجم لا يقل عن 44×44 بكسل.
• تسمية وصول عربية على الزر: المزيد من الإجراءات.
• يقترن لون العنصر المدمّر بتسمية فعل صريحة، لا اللون وحده.

الاتجاه والتوطين

الاتجاه منطقي: صمّم القائمة وعناصرها بخصائص منطقية (البداية والنهاية) والمنصة تعكس تلقائيا في العربية، دون الحاجة لعكس يدوي.

افعل ولا تفعل

الرموز المستخدمة

الشيفرة

قائمة الإجراءات تُستورد من حزمة المكوّنات. الاستخدام في React أولا، ثم بنية القائمة: العناصر مرتّبة من الأكثر أمانا، والإجراء المدمّر يأتي أخيرا خلف خط فاصل بلون danger-out.

import { OverflowMenu, MenuItem } from "@mercato/components";

<OverflowMenu label="المزيد من الإجراءات" hasDestructiveAction>
  <MenuItem icon="visibility">عرض التفاصيل</MenuItem>
  <MenuItem icon="edit">تعديل</MenuItem>
  <MenuItem icon="share">مشاركة</MenuItem>
  <MenuItem icon="delete" tone="destructive">إلغاء الطلبية</MenuItem>
</OverflowMenu>

// Secondary actions behind a kebab; the destructive item sits last
// behind a divider. Radius comes from the shape scale, not a raw value.
<div role="menu" className="w-[13rem] border border-hairline bg-canvas p-1 shadow-lg"
     style={{ borderRadius: "var(--shape-surface-base)" }}>
  {items.map((it) => (
    <button key={it.label} role="menuitem"
            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[14px] text-ink hover:bg-surface">
      <span className="material-symbol text-muted" style={{ fontSize: 18 }}>{it.icon}</span>
      <span className="flex-1 text-start">{it.label}</span>
    </button>
  ))}
  {destructive && (
    <>
      <div className="my-1 border-t border-hairline" />
      <button role="menuitem"
              className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[14px] text-danger-out hover:bg-surface">
        <span className="material-symbol" style={{ fontSize: 18 }}>delete</span>
        <span className="flex-1 text-start">حذف</span>
      </button>
    </>
  )}
</div>

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

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