ددیگ

Sidebar

نوار کناری کامل برای داشبورد: جمع می‌شود، روی موبایل به کشو تبدیل می‌شود، حالتش در کوکی می‌ماند و با Ctrl+B باز و بسته می‌شود. لبه‌اش منطقی است، پس در چیدمان راست‌به‌چپ خودش سمت راست می‌نشیند.

ری‌اکت ۱۹ و 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/sidebar.json
npx dig-ui@latest add https://design-system-tau-green.vercel.app/r/sidebar.json
yarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/sidebar.json
bunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/sidebar.json

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

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

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

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

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

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

استفاده

// app/layout.tsx یا لایهٔ داشبورد
import {
  Sidebar,
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

<SidebarProvider defaultOpen={sidebarOpenFromCookie}>
  <Sidebar>…</Sidebar>
  <SidebarInset>
    <header className="flex h-14 items-center gap-2 border-b px-4">
      <SidebarTrigger />
      <h1 className="text-sm font-medium">داشبورد</h1>
    </header>
    {children}
  </SidebarInset>
</SidebarProvider>

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

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

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

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

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

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

ترکیب اجزا

SidebarProvider حالت باز و بسته را نگه می‌دارد، آن را در کوکی sidebar_state می‌نویسد و میان‌بر Ctrl+B را وصل می‌کند؛ همه‌چیز باید داخل آن باشد. Sidebar خودش دو حالت کاملاً جدا رندر می‌کند: روی دسکتاپ یک ستون ثابت با انیمیشن عرض، و روی موبایل (زیر ۷۶۸ پیکسل) همان محتوا داخل کشو. محتوای صفحه را در SidebarInset بگذارید تا با جمع شدن نوار جابه‌جا شود. لبه با side=«start» یا «end» تعیین می‌شود که منطقی است — در راست‌به‌چپ start یعنی راست. برای حفظ حالت بین رفرش‌ها، کوکی را در سرور بخوانید و به defaultOpen بدهید.

دسترس‌پذیری

  • SidebarTrigger یک دکمهٔ واقعی با متن sr-only است؛ میان‌بر Ctrl+B هم همان کار را می‌کند.
  • روی موبایل محتوا داخل کشو (Sheet) می‌رود که فوکوس را قفل می‌کند و با Escape بسته می‌شود؛ عنوان کشو برای صفحه‌خوان تعریف شده است.
  • SidebarMenuButton را با asChild روی Link بگذارید تا لینک واقعی بماند و برای صفحهٔ فعلی isActive و aria-current بدهید.
  • در حالت جمع‌شدهٔ آیکونی، متن دکمه‌ها پنهان می‌شود؛ برای هر دکمه tooltip بدهید تا معنایش از دست نرود.
  • SidebarRail یک هدف کلیک نازک کنار نوار است که tabIndex=-1 دارد و از ناوبری صفحه‌کلید بیرون می‌ماند، چون همان کار تریگر را تکرار می‌کند.

مرجع API

SidebarProvider

ویژگینوعپیش‌فرضتوضیح
defaultOpenbooleantrueحالت اولیه؛ برای حفظ انتخاب کاربر، کوکی sidebar_state را در سرور بخوانید و اینجا بدهید.
open / onOpenChangeboolean / (open: boolean) => void—کنترل کامل حالت از بیرون.
styleReact.CSSProperties—برای تغییر عرض‌ها: --sidebar-width و --sidebar-width-icon.

SidebarMenuButton

ویژگینوعپیش‌فرضتوضیح
isActivebooleanfalseصفحهٔ فعلی؛ پس‌زمینه و وزن متن را تغییر می‌دهد.
tooltipstring | TooltipContentProps—فقط در حالت جمع‌شدهٔ آیکونی روی دسکتاپ نمایش داده می‌شود.
asChildbooleanfalseبرای گذاشتن Link نکست به‌جای button.
variant / size"default" | "outline" / "default" | "sm" | "lg"—ظاهر و ارتفاع دکمه.

useSidebar

هوک دسترسی به حالت نوار از هر جای درخت.

ویژگینوعپیش‌فرضتوضیح
state"expanded" | "collapsed"—حالت فعلی روی دسکتاپ.
open / setOpenboolean / (open: boolean) => void—باز بودن روی دسکتاپ.
openMobile / setOpenMobileboolean / (open: boolean) => void—باز بودن کشو روی موبایل.
isMobileboolean—آیا عرض صفحه زیر ۷۶۸ پیکسل است.
toggleSidebar() => void—باز و بسته کردن؛ خودش می‌فهمد موبایل است یا دسکتاپ.

بقیهٔ اجزا

ویژگینوعپیش‌فرضتوضیح
SidebarHeader / SidebarFooterdiv—بالا و پایین نوار، بیرون از ناحیهٔ اسکرول.
SidebarContentdiv—ناحیهٔ اسکرول‌شوندهٔ میانی.
SidebarGroup / SidebarGroupLabel / SidebarGroupContentdiv—دسته‌بندی آیتم‌ها؛ برچسب در حالت آیکونی محو می‌شود.
SidebarMenuBadge / SidebarMenuActiondiv / button—شمارنده و دکمهٔ عملیات در انتهای آیتم؛ در حالت آیکونی پنهان می‌شوند.
SidebarMenuSkeletondiv—جای‌نگهدار بارگذاری با عرض تصادفیِ پایدار.
SidebarInsetmain—ناحیهٔ محتوای کنار نوار؛ با حالت inset گوشه‌گرد و سایه‌دار می‌شود.
SidebarRailbutton—نوار نازک کنار برای باز و بسته کردن با کلیک.

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

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

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

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

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

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