دکمه شناور (FAB)
وضعیت
هدفِ normative — در production وب معادل دارد (compact-only). جزئیات پذیرش در
وضعیت پذیرش طراحی؛ کلاس .fab prototype-only است.
هدف
میانبرِ «ایجاد» در کلاسهای compact و medium که سایدبار دائمی ندارند. رفتارش با زمینه عوض میشود: در نمای وظایف «ایجاد وظیفه»، در بقیهٔ نماها «ایجاد رویداد».
ساختار
<button class="fab" aria-label="ایجاد رویداد"> با آیکون + (۲۴px) — فقط
آیکون، بدون متن.
گونهها و اندازهها
یک گونه، یک اندازه: ۵۶×۵۶ · شعاع ۱۸ · سایه ۲. اندازهٔ کوچک FAB ندارد.
حالتها
| حالت | ظاهر |
|---|---|
| default | ظرف برند + آیکون روشن + سایه ۲ |
| hover | سایه ۳ + ۲px بالا |
| focus-visible | حلقهٔ ۲px برند |
| active | مقیاس ۰٫۹۶ |
| disabled / loading / error / success | ندارد (نپذیرفتن) — همیشه فعال است |
رفتار
- جایگاه: گوشهٔ پایین–ابتدا (inset-inline-start در RTL) · ۲۰px از لبهها، بالای ناوبری پایین.
- کلید میانبر
Nهمان عملکرد FAB را دارد. - در expanded (سایدبار دائمی) حذف میشود؛ دکمهٔ ایجاد به سایدبار میرود.
کیبورد و دسترسپذیری
aria-labelزمینهدار («ایجاد رویداد»/«ایجاد وظیفه»).Nمیانبر سراسری؛ در ورودیهای متنی غیرفعال.- هدف ۵۶px — بالای حداقل ۴۴px.
رفتار واکنشگرا
فقط compact (md3:hidden در وب). در medium دکمهٔ create به داخل ریل
(NavigationRail) میرود و در expanded به سایدبار — اکشن ایجاد در هیچ کلاسی
مخفی نمیشود.
قواعد محتوا
- ✅ فقط یک FAB در هر صفحه؛ فقط برای ایجاد.
- ❌ FAB برای اکشنهای مخرب یا کم اهمیت؛ FAB همراه با متن.
توکنها
ظرف برند/--on-brand · شعاع ۱۸ · سایه ۲/۳ · --ease با ۱۲۰ms مقیاس.
پیادهسازی پلتفرمها
- وب: پیادهسازیشده —
Fab.tsx(compact-only، Tailwind،aria-labelپیشفرض «ایجاد رویداد»). - اندروید:
component/Fab.kt. .fabفقط درui-design/prototypes/assets/app.css(prototype-only).