البناء · جديد

الزر المنقسم

إجراء رئيسي ومعه نصف ثانٍ يفتح قائمة بإجراءات قريبة منه، مثل «حفظ» مع «حفظ كمسودة». لكل نصف تركيزه الخاص، وفي العربية ينتقل نصف القائمة إلى اليسار.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/split-button

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

الاستخدام

import { SplitButton, SplitButtonItem } from "@/components/ui/split-button";

<SplitButton
  onClick={save}
  menuLabel="More save options"
  menu={
    <>
      <SplitButtonItem onClick={saveDraft}>Save as draft</SplitButtonItem>
      <SplitButtonItem onClick={publish}>Save and publish</SplitButtonItem>
    </>
  }
>
  Save
</SplitButton>

أمثلة

الأنماط

أنماط الزر filled وtonal وoutline وghost، والنصفان بالنمط نفسه دائماً. لا يوجد inverted-ghost ولا نسخة خطرة: الإجراء الخطر لا يُخفى في قائمة.

الأحجام

كل حجم بارتفاع الزر من الحجم نفسه، ونصف القائمة مربع. مساحة النقر 48 بكسل على الأقل في sm وxs.

غير متاح

disabled يوقف النصفين معاً.

مرجع الخصائص

SplitButton

خصائص Base UI Button الأخرى (onClick، type…) تذهب إلى نصف الإجراء الرئيسي.

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Label: نص الإجراء الرئيسي.
`menuLabel`	`string`		مطلوب. اسم نصف القائمة لقارئات الشاشة («خيارات حفظ أخرى»).
`menu`	`ReactNode`		عناصر `SplitButtonItem` للإجراءات القريبة.
`variant`	`"filled" \| "tonal" \| "outline" \| "ghost"`	`"filled"`	خاصية Style.
`size`	`"lg" \| "md" \| "sm" \| "xs"`	`"lg"`	خاصية Size: ‏56 و48 و40 و32 بكسل.
`iconLeading`	`IconComponent`		Icon leading: أيقونة قبل النص.
`trailingIcon`	`IconComponent`	`CaretDownIcon`	Trailing btn icon. لا ينعكس أبداً.
`disabled`	`boolean`	`false`	State = Disabled للنصفين.
`className`	`string`		أصناف للمجموعة الخارجية.

SplitButtonItem

عنصر من Base UI Menu، يقبل onClick وdisabled. شكل القائمة مؤقت حتى تجهز صفحة القوائم في Figma.

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		نص الإجراء.
`onClick`	`(event) => void`		يُستدعى عند الاختيار، ثم تُغلق القائمة.
`disabled`	`boolean`	`false`	يعطّل العنصر ويبقيه ظاهراً.

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	ينتقل من الإجراء الرئيسي إلى نصف القائمة؛ لكل نصف حلقة تركيزه.
`EnterSpace`	على الإجراء الرئيسي ينفّذه، وعلى نصف القائمة يفتحها.
`ArrowDownArrowUp`	يفتح القائمة وينتقل بين عناصرها.
`Escape`	يغلق القائمة ويعيد التركيز إلى نصف القائمة.

ARIA

زران أصليان داخل role="group"، ونصف القائمة يحمل aria-haspopup="menu" وaria-expanded.
menuLabel مطلوب في النوع، فلا يُنشر سهم بلا اسم. اكتبه بلغة الصفحة.
القائمة role="menu" وعناصرها menuitem من Base UI، مع تنقل الأسهم والكتابة للبحث.

ملاحظات العربية والاتجاه

ينعكس

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

لا ينعكس

السهم CaretDown يشير إلى الأسفل، فلا ينعكس، حتى لو استُبدل بأيقونة اتجاهية.

الأرقام: الأرقام داخل النص أو عناصر القائمة («تصدير 3 ملفات») تُنسّق بـformatNumber.
الخط العربي: النص body-16 (وbody-14 في xs) بوزن Semibold كالزر، وعناصر القائمة body-16 بصفوف 48 بكسل تتسع للنص العربي.
النص ثنائي الاتجاه: اسم صيغة أو منتج لاتيني داخل عنصر عربي («تصدير بصيغة PDF») يبقى صحيحاً في نهاية النص؛ في وسطه ضعه في <bdi>.

كل المكونات ›