ددیگ

AppBar

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

ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API و Reka UISvelte ۵ با runes و Bits UIانگولار با signals و Angular CDK

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

داشبورد

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

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

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

نصب

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

نصب سریع با لینک سخت و دیسک مشترکپکیج‌منیجر پیش‌فرض Node.jsYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/app-bar.json
npx dig-ui@latest add https://design-system-tau-green.vercel.app/r/app-bar.json
yarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/app-bar.json
bunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/app-bar.json

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

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

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

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

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

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

استفاده

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

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

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

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

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

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

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

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

ترکیب اجزا

عنوان به‌طور پیش‌فرض 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 دقیقاً وسطِ کل نوار می‌نشیند، نه وسطِ فضای بینِ ابتدا/انتها.

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

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

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

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

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

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