دیگ

AppBarv1.0.0

نوار بالای صفحه: یک ردیفِ ثابت با سه ناحیه؛ ابتدا برای دکمهٔ برگشت/منو یا لوگو، عنوان، و انتها برای کنش‌ها. برخلاف Toolbar که برای گروهی از دکمهٔ هم‌ردیف با ناوبری فلشی است، AppBar فقط چیدمانِ سرصفحه را می‌دهد؛ چیزی شبیه هدرِ اپ‌های موبایل.

ری‌اکت ۱۹ و 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/app-bar.json
pnpm dlx digdesign@latest add https://docs.digdesign.ir/r/app-bar.json
yarn dlx digdesign@latest add https://docs.digdesign.ir/r/app-bar.json
bunx --bun digdesign@latest add https://docs.digdesign.ir/r/app-bar.json

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

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

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

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

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

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

استفاده

import {
  AppBar,
  AppBarLeading,
  AppBarTitle,
  AppBarActions,
} from "@/components/ui/app-bar"

<AppBar sticky>
  <AppBarLeading>…</AppBarLeading>
  <AppBarTitle>عنوان صفحه</AppBarTitle>
  <AppBarActions>…</AppBarActions>
</AppBar>

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

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

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

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

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

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

ترکیب اجزا

عنوان به‌طور پیش‌فرض flex-1 با line-clamp/truncate است، پس هرچقدر ابتدا و انتها جا بگیرند، فقط عنوان خودش را جمع می‌کند و کنش‌ها هیچ‌وقت از نوار بیرون نمی‌زنند. اگر عنوان باید دقیقاً وسطِ کل نوار بنشیند (نه وسطِ فضای بینِ ابتدا و انتها، که وقتی دو طرف عرض نامساوی دارند فرق می‌کند)، centered را روی AppBarTitle روشن کنید تا با absolute دقیقاً وسط‌چین شود.

دسترس‌پذیری

  • خودِ AppBar یک header معنایی است؛ اگر صفحه چند header تودرتو دارد (مثل یک AppBar داخل کارت)، role را دستی به banner یا group تغییر بدهید تا فقط یک landmark banner واقعی در صفحه بماند.
  • AppBarTitle یک h1 است. برای صفحه‌ای که سرتیترِ دیگری هم دارد (مثل محتوای زیرش)، سطح h را با as یا override هماهنگ کنید تا ساختار عنوان‌ها یکی نپرد.
  • دکمه‌های داخل Leading/Actions که فقط آیکون دارند حتماً aria-label بگیرند؛ خودِ AppBar چیزی برایشان اضافه نمی‌کند.

مرجع API

AppBar

ویژگینوعپیش‌فرضتوضیح
variant"bordered" | "elevated" | "transparent""bordered"ظاهر لبهٔ پایین: bordered خط ظریف، elevated سایه، transparent هیچ‌کدام.
stickybooleanfalseبه بالای ظرفِ اسکرول‌شونده (یا صفحه) بچسبد.

AppBarTitle

ویژگینوعپیش‌فرضتوضیح
centeredbooleanfalseبا absolute دقیقاً وسطِ کل نوار می‌نشیند، نه وسطِ فضای بینِ ابتدا/انتها.
subtitleReact.ReactNode—توضیحِ کوتاهِ زیرِ عنوان؛ هر دو جداگانه truncate می‌شوند.

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

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

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

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

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

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