Menu

التثبيتنسخ رابط العنوان

الاستخدامنسخ رابط العنوان

import { Edit02Icon, Delete02Icon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu";

export function RequestActions() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>الإجراءات</MenuTrigger>
      <MenuContent>
        <MenuItem>
          <HugeiconsIcon icon={Edit02Icon} aria-hidden />
          تعديل الطلب
        </MenuItem>
        <MenuSeparator />
        <MenuItem>
          <HugeiconsIcon icon={Delete02Icon} aria-hidden />
          سحب الطلب
        </MenuItem>
      </MenuContent>
    </Menu>
  );
}

استخدم Menu لمجموعة إجراءات على شيء واحد: صف في جدول أو بطاقة أو ملف شخصي. ولاختيار قيمة تُحفظ في نموذج استخدم Select. وتنفّذ العناصر إجراءً عند اختيارها. ضع أيقونة أولًا (وهي زخرفية) ثم التسمية ثم محتوى اختياريًا في النهاية مثل MenuShortcut. وللرابط اعرض عنصر a: <MenuItem render={<a href="/" />}>. وأبقِ القائمة في نحو سبعة عناصر؛ وقسّم الأطول بـ MenuSeparator وMenuGroup.

البنيةنسخ رابط العنوان

• الزر: الذي يفتح القائمة.
• القائمة (role="menu"): background-menu وحد بسمك 1px وانحناء radius-md وshadow-2xl.
• العنصر (role="menuitem"): بارتفاع 40px وحشوة 8px، وأيقونة ومحتوى في النهاية اختياريان.
• عناصر مربع الاختيار والراديو: تعرض علامة صح أو نقطة في جهة النهاية عند اختيارها.
• المجموعة والعنوان والفاصل: بنية للقوائم الأطول.
• القائمة الفرعية: MenuSub مع MenuSubTrigger (سهم) وMenuSubContent.

أمثلةنسخ رابط العنوان

عناصر مربع الاختيار والراديونسخ رابط العنوان

يشغّل MenuCheckboxItem شيئًا أو يوقفه. ويختار MenuRadioGroup مع MenuRadioItem خيارًا واحدًا. وتحصل المجموعات على MenuLabel.

قائمة فرعيةنسخ رابط العنوان

يفتح MenuSub قائمة ثانية بجانب عنصرها في جهة النهاية. وتُفتح بـ Enter أو Space أو السهم المتجه إليها، وتُغلق بالسهم المعاكس.

تبقى مفتوحة ومُدارةنسخ رابط العنوان

يمكن لعنصر مربع الاختيار أو الراديو أن يضبط closeOnClick={false} فتبقى القائمة مفتوحة بينما يغيّر الشخص عدة خيارات. مرّر open وonOpenChange إلى Menu لقراءة حالتها أو ضبطها. والعنصر العادي يغلق القائمة.

RTLنسخ رابط العنوان

تُحاذى القوائم إلى حافة بداية الزر (الحافة اليمنى بالعربية). وتفتح القائمة الفرعية في جهة النهاية أي على اليسار، ويُعكس سهمها. ويتبادل اليمين واليسار: فاليسار يفتح قائمة فرعية بالعربية. وتبقى الأرقام والاختصارات من اليسار إلى اليمين.

إمكانية الوصولنسخ رابط العنوان

• مبنية على Base UI Menu: role="menu" وعناصر بـ role="menuitem" وmenuitemcheckbox وmenuitemradio، وللزر aria-haspopup وaria-expanded.
• عنصر واحد فقط في ترتيب Tab في كل مرة (تركيز متنقل)؛ وتنقل الأسهم بين العناصر ويعود التركيز إلى الزر عند الإغلاق.
• يعرض التمرير والتمييز بلوحة المفاتيح تعبئة؛ ويضيف تركيز لوحة المفاتيح حدًا بسمك 2px داخل العنصر (بنسبة 3:1 أو أفضل). وللعنصر المحدد تظليل وعلامة صح أو نقطة، فلا يعتمد على اللون وحده.
• النص بنسبة 4.5:1 والأيقونات 3:1 أو أفضل في كل حالة، فاتحًا وداكنًا. ويبقى العنصر المعطّل في ترتيب مفاتيح الأسهم ليمكن العثور عليه، لكن لا يمكن اختياره.

مرجع APIنسخ رابط العنوان

الاختلافات عن DGAنسخ رابط العنوان

• تعبئة التمرير في Figma هي button-background-neutral-hovered، بينما يضبط CSS أيضًا neutral-100 على المحدد نفسه. ويُعتمد Figma. وحد التركيز بسمك 2px مخطط داخلي لتركيز لوحة المفاتيح فقط.
• تستخدم العناصر المعطّلة text-default-disabled لا opacity: .5 كما في CSS: فالشفافية تُبهت حلقة التركيز وعلامة الصح أيضًا.
• أُضيفت القوائم الفرعية وعناصر مربع الاختيار والراديو؛ وصُيّرت متغيرات النهاية الخمسة فتحة واحدة (أي عنصر بعد التسمية).

التبايننسخ رابط العنوان