زر عائم
FloatingButtonزر إجراء عائم (FAB) في React للإجراء الرئيسي الوحيد في الشاشة: أيقونة فقط أو حبة ممتدة، على سطح عادي أو ملون، مع asChild للروابط. يراعي الاتجاه من اليمين إلى اليسار.
يبرز FloatingButton أهم إجراء في الشاشة. يجب تمرير الخاصية icon، وأضف children لعرض نص بجانب الأيقونة. تحدد أنت موضع الزر.
متى تستخدمه
استخدم FloatingButton حين يكون في الشاشة إجراء رئيسي واحد يجب أن يبقى في المتناول أثناء التمرير. ومن أمثلته بدء طلب جديد في بوابة للمستفيدين. اكتف بزر عائم واحد في الشاشة. إذا كان الإجراء تابعاً لنموذج أو بطاقة، استخدم Button.
لا يحدد المكون موضعه بنفسه. ضعه في تخطيطك بحيث لا يغطي المحتوى أو شريط التنقل السفلي في الجوال.
أمثلة
الخصائص
الخصائص التي يعرفها FloatingButton. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "primary" | "secondary" | "black" | ||
size | "sm" | "lg" | ||
onColor | boolean | ||
iconإلزامي | react.ReactNode | Lead action glyph, rendered at 24px (e.g. a plus for "create"). | |
children | react.ReactNode | Optional label. Present → an extended pill (icon + label, gap 8); omit →
a circular icon-only FAB (then provide an aria-label). | |
iconFlip | boolean | Flip the icon horizontally in RTL (for directional glyphs). | |
asChild | boolean | Render as the single child element instead of a <button>, to compose with
router links: <FloatingButton asChild icon={…}><a href="…" /></FloatingButton>.
type and native disabled are dropped; disabled then relies on
aria-disabled + tabIndex={-1} (consumer must still gate the action). |
إمكانية الوصول
الأيقونة icon زخرفية، لذا يجب أن يحمل الزر العائم ذو الأيقونة فقط aria-label يسمي الإجراء. تستخدم الحبة الممتدة نصها الظاهر اسماً متاحاً. يعرض الزر حالة التعطيل عبر aria-disabled ليبقى قابلاً للاكتشاف.
ولأن الزر عائم، تأكد من أنه لا يغطي محتوى قابلاً للتركيز، ومن أن تباينه كاف مع السطح الذي خلفه.