البناء · جديد

الزر العائم

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

المعاينة

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

التثبيت

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

npx shadcn@latest add @ritla/fab

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

الاستخدام

import { Fab } from "@/components/ui/fab";

<Fab label="New transaction" className="fixed bottom-24 end-24" onClick={create} />

أمثلة

الأحجام

sm ‏56 (الافتراضي) وmd ‏80 وlg ‏96 بكسل. extended يُظهر النص بجانب الأيقونة؛ دونه يصبح label اسم الزر لقارئات الشاشة.

الحالات

المرور يرفعه بظل أكبر، والضغط يغمق لونه، والتركيز يضيف الحلقة ويبقي الظل. لا توجد حالة معطّلة: إن لم يكن الإجراء متاحاً فلا تُظهر الزر.

مرجع الخصائص

Fab

أي خاصية أخرى من Base UI Button تمر كما هي (onClick…).

الخاصية	النوع	الافتراضي	الوصف
`label`	`string`		مطلوب. خاصية Label: النص الظاهر مع `extended`، والاسم لقارئات الشاشة دونه.
`extended`	`boolean`	`false`	خاصية Extended FAB.
`icon`	`IconComponent`	`PlusIcon`	Icon leading. الأيقونات الاتجاهية تنعكس في العربية.
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	خاصية Size: ‏56 و80 و96 بكسل.
`render`	`ReactElement`		رابط بشكل الزر العائم، يحتفظ بدلالته.
`className`	`string`		الموضع: `fixed bottom-24 end-24` للزاوية السفلية عند نهاية السطر.

FabMenu, FabMenuItem

الخاصية	النوع	الافتراضي	الوصف
`label`	`string`		مطلوب. اسم الزر الذي يفتح القائمة («إجراءات سريعة»)، ويبقى نفسه وهي مفتوحة.
`icon`	`IconComponent`	`PlusIcon`	أيقونة الزر وهو مغلق؛ تصبح X عند الفتح.
`open / defaultOpen / onOpenChange`	`boolean / (open) => void`		حالة الفتح.
`className`	`string`		الموضع، كما في `Fab`.
`FabMenuItem: children, icon, onClick`	`ReactNode, IconComponent, (event) => void`		نص الإجراء وأيقونته وما ينفّذه؛ تُغلق القائمة بعده.

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

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

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

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

ARIA

الزر العائم بأيقونة فقط يأخذ label اسماً؛ الموسّع يُسمّى بنصه.
زر القائمة يحمل aria-haspopup="menu" وaria-expanded، ويبقى اسمه نفسه حين يصبح X، فلا يتغير ما يُعلن.
زر عائم ثابت يغطي المحتوى: اترك مساحة أسفل الصفحة بقدر الزر ومسافته كي لا يخفي آخر عنصر.

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

ينعكس

الموضع منطقي: end-24 يضع الزر أسفل اليسار في العربية.
إجراءات القائمة تصطف عند نهاية السطر، أي على اليسار فوق الزر في العربية، والأيقونة قبل النص من جهة اليمين.

لا ينعكس

أيقونات Plus وX والقلم لا تنعكس؛ الظل عمودي فقط.

الأرقام: لا أرقام في الزر عادةً؛ إن أضفت عدداً إلى نص إجراء فنسّقه بـformatNumber.
الخط العربي: النص body-16 وbody-18 وbody-20 بوزن Semibold حسب الحجم، والارتفاع ثابت يتسع للعربية.
النص ثنائي الاتجاه: اسم لاتيني في نهاية إجراء عربي («مسح رمز QR») يُعرض صحيحاً؛ في وسطه ضعه في <bdi>.

كل المكونات ›