دیگ

Bottom App Barv1.0.0

نوار کنشِ پایینِ صفحه در موبایل: یک دکمهٔ اصلی (افزودن یا منو) و تا چهار کنشِ آیکونی، یا چند ابزارِ برچسب‌دار برای کارِ گروهی روی موردهای انتخاب‌شده.

شبیه به این هم هست:Bottom NavigationAction BarApp Bar
ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API — هنوز برای این کامپوننت پورت نشدهSvelte ۵ با runes — هنوز برای این کامپوننت پورت نشدهانگولار با signals و دایرکتیوهای standalone — هنوز برای این کامپوننت پورت نشده

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
npx digdesign@latest add https://docs.digdesign.ir/r/bottom-app-bar.json
pnpm dlx digdesign@latest add https://docs.digdesign.ir/r/bottom-app-bar.json
yarn dlx digdesign@latest add https://docs.digdesign.ir/r/bottom-app-bar.json
bunx --bun digdesign@latest add https://docs.digdesign.ir/r/bottom-app-bar.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

استفاده

import {
  BottomAppBar,
  BottomAppBarAction,
  BottomAppBarActions,
  BottomAppBarFab,
} from "@/components/ui/bottom-app-bar"

<BottomAppBar fixed>
  <BottomAppBarFab label="افزودن"><PlusIcon /></BottomAppBarFab>
  <BottomAppBarActions>
    <BottomAppBarAction label="جست‌وجو"><SearchIcon /></BottomAppBarAction>
  </BottomAppBarActions>
</BottomAppBar>

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

ترکیب اجزا

BottomAppBar با BottomNavigation فرق دارد: آن یکی بین صفحه‌ها جابه‌جا می‌کند، این یکی کارهای همین صفحه را انجام می‌دهد. هر دو را هم‌زمان در یک صفحه نگذارید.

BottomAppBarFab اقدامِ اصلی است و در ابتدای ردیف (راست در RTL) زیرِ شستِ دستِ راست می‌نشیند. BottomAppBarActions کنش‌های آیکونی را به انتهای ردیف می‌برد. در layout="tools" دکمهٔ اصلی ندارید و ابزارها با برچسب در عرض پخش می‌شوند.

دسترس‌پذیری

  • هر کنش label اجباری دارد؛ در چیدمانِ پیش‌فرض aria-label و تولتیپِ بومی می‌شود و در tools زیرِ آیکون دیده می‌شود.
  • کنش‌ها ۴۰ و دکمهٔ اصلی ۴۴ پیکسل‌اند؛ با فاصلهٔ بینشان هدفِ لمس برای انگشت کافی است.
  • با fixed، فاصلهٔ پایینی از env(safe-area-inset-bottom) می‌آید تا روی نوارِ خانهٔ گوشی‌های بدون دکمه نیفتد.
  • کنشِ غیرفعال رنگِ placeholder می‌گیرد نه opacity، و از چرخهٔ Tab بیرون می‌رود.

مرجع API

BottomAppBar

ویژگینوعپیش‌فرضتوضیح
layout"default" | "tools""default"default: دکمهٔ اصلی + کنش‌ها؛ tools: ابزارهای هم‌وزن در عرض.
fixedbooleanfalseچسبیدن به پایینِ صفحه با فاصلهٔ safe-area.

BottomAppBarFab

ویژگینوعپیش‌فرضتوضیح
labelstring—aria-label؛ اجباری چون فقط آیکون دارد.
variant"primary" | "secondary""primary"primary رنگیِ اقدامِ اصلی؛ secondary سفیدِ کادردار (منو).

BottomAppBarAction

ویژگینوعپیش‌فرضتوضیح
labelstring—برچسبِ کنش؛ اجباری.
showLabelbooleanfalseبرچسب زیرِ آیکون؛ برای layout="tools".

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.