Bottom Action Barv1.0.0
در صفحه‌های بلندِ گوشی (محصول، سبد، انتخابِ نوبت، فرمِ چندبخشی) اقدامِ اصلی باید همیشه زیرِ شست باشد. این نوار به پایین می‌چسبد، خلاصهٔ تصمیم (مبلغ، تعداد، زمانِ انتخاب‌شده) را کنارِ دکمه نشان می‌دهد و از ناحیهٔ امنِ پایینِ آیفون فاصله می‌گیرد. در دسکتاپ معمولاً همین اقدام در ستونِ کنار است، پس پیش‌فرض از lg به بعد پنهان می‌شود.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/bottom-action-bar.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/bottom-action-bar.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/bottom-action-bar.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/bottom-action-bar.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { BottomActionBar, BottomActionBarSummary } from "@/components/ui/bottom-action-bar"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
BottomActionBar آخرین فرزندِ ستونِ صفحه است (sticky، نه fixed، تا روی فوترِ صفحه نیفتد). BottomActionBarSummary برچسبِ کوچک و مقدارِ پررنگ را می‌گیرد؛ دکمهٔ اصلی بقیهٔ عرض را پر می‌کند. اگر خلاصه‌ای نیست، فقط دکمه با fullWidth.
دسترس‌پذیری
- نوار sticky است، پس در ترتیبِ DOM بعد از محتوا می‌آید و کاربرِ صفحه‌کلید آن را در جای طبیعی‌اش می‌بیند.
- همان اقدام در دسکتاپ جای دیگری (ستونِ کنار) هست؛ دو دکمه با یک کار برچسبِ یکسان داشته باشند.
- مبلغ با tabular-nums و ارقامِ فارسی؛ با تغییرِ مقدار، اگر مهم است، با aria-live اعلامش کنید.
مرجع API
BottomActionBar
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| hideFrom | "sm" | "md" | "lg" | "none" | "lg" | از این عرض به بالا پنهان؛ none برای اپِ موبایل که همیشه نوار دارد. |
BottomActionBarSummary
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| label | React.ReactNode | — | برچسبِ کوچک، با آیکونِ اختیاری. |
| value | React.ReactNode | — | مقدارِ پررنگ: مبلغ، تعداد یا زمان. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونهها
فقط دکمه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| فقط دکمه | فرمِ سفارش یا ثبتنامِ بلند |
دستورالعمل استفاده
یک اقدامِ اصلی، با خلاصهٔ تصمیم
انجام بده
مبلغِ نهایی کنارِ «افزودن به سبد»؛ کاربر میداند با زدنِ دکمه چه می‌شود.
انجام نده
دو یا سه دکمهٔ هموزن در نوار؛ نوارِ پایین جای یک تصمیم است. اقدامِ دوم را در محتوا بگذارید.