الزر العائم

زر إجراء بارز يطفو فوق الواجهة، يمثّل الإجراء الأساسي للشاشة بصرف النظر عن موضع التمرير.

Loading demo: floating-button-real-world

التثبيت

npx sdaia-ui@latest add floatingbutton

npx sdaia@latest add floating-button

import { FloatingButton } from 'component/ui';\n<FloatingButton icon="plus" aria-label="Create" />

زر الإجراء العائم بالنمط الأساسي.

Loading demo: floating-button-primary

زر الإجراء العائم بالنمط الثانوي الصُّلب.

Loading demo: floating-button-secondary-solid

زر الإجراء العائم بالنمط المحايد.

Loading demo: floating-button-neutral

زر عائم يعرض أيقونة فحسب دون تسمية.

Loading demo: floating-button-icon-only

زر عائم مع تسمية نصية مرافقة.

Loading demo: floating-button-with-label

الزر العائم متوفّر بأحجام كبير ومتوسط وصغير.

Loading demo: floating-button-sizes

الزر العائم في حالة التعطيل، يمنع التفاعل.

Loading demo: floating-button-disabled