پنل کناری — Sidebar

Sidebarکپی کد ستون ناوبری یک داشبورد است: هدر قالب‌دار در بالا، فهرست مقصدها در میانه و فوتر در پایین. در دسکتاپ به‌صورت ستون ثابت می‌ماند؛ در موبایل و تبلت همان پنل را به‌صورت overlay با پس‌زمینهٔ کدر باز و بسته می‌کنید. فهرست مقصدها (بخش‌ها، گروه‌های بازشونده، حالت ریل) همان ناوبری کناری است و دیگر صفحهٔ جدا ندارد.

وضعیت: beta · لایه: ۳ (@tokapps/tukکپی کد) · کد: packages/tuk/src/navigation/sidebar/کپی کد

import { Sidebar } from '@tokapps/tuk';

پلی‌گراند و همهٔ پیکربندی‌ها

نوع، لبه، هدر، فوتر، حالت ریل، گروه‌ها، نشان‌ها، صفحهٔ فعلی و تصویر پس‌زمینه را عوض کنید. پیش‌نمایش و کد قابل کپی از همان پیکربندی ساخته می‌شوند.

import { Icon } from '@tokapps/icons';import { Sidebar } from '@tokapps/tuk';const sections = [  {    id: 'main',    heading: 'اصلی',    items: [      { id: 'home', label: 'خانه', href: '/', icon: <Icon name="home" size="sm" /> },      {        id: 'ideas',        label: 'ایده‌ها',        icon: <Icon name="product.ideation" size="sm" />,        children: [          { id: 'ideas-new', label: 'جدیدترین', href: '/ideas/new', current: true },          { id: 'ideas-top', label: 'برترین‌ها', href: '/ideas/top', badge: '۹' },        ],      },      { id: 'funding', label: 'سرمایه‌گذاری', href: '/funding', icon: <Icon name="product.funding" size="sm" /> },    ],  },  {    id: 'account',    heading: 'حساب',    items: [      { id: 'settings', label: 'تنظیمات', href: '/settings', icon: <Icon name="settings" size="sm" /> },    ],  },];export function AppSidebar() {  return (    <Sidebar      sections={sections}      header={<span>تُوکاپس · پنل</span>}      footer={<span>فضای کاری شما · ارتقا برای قابلیت‌های بیشتر</span>}      backgroundImage="https://demos.creative-tim.com/material-dashboard-material-ui-v4/static/media/sidebar-2.22f68ba5.jpg"      aria-label="ناوبری پنل"    />  );}

تصویر پس‌زمینه

تصویر پیش‌فرض پلی‌گراند و نمونه‌ها، تصویر sidebar-2کپی کد از قالب Material Dashboard کریتیو تیم است. در کادر «تصویر پس‌زمینه» آدرس دیگری بگذارید، یا خالی کنید تا بدون تصویر باشد.

• تصویر در هر دو حالت static و overlay نمایش داده می‌شود.
• تصویر زیر یک لایهٔ سطح تم قرار می‌گیرد (۷۵٪)، پس متن در لایت و دارک خوانا می‌ماند.
• کامپوننت پیش‌فرض تصویر ندارد؛ پیش‌فرض فقط در پلی‌گراند و نمونه‌هاست.
• مجوز: این تصویر از محصول دیگری است. پیش از انتشار محصول، مجوز استفاده را بررسی کنید یا فایل را روی دامنهٔ خودتان (apps/docs/public/کپی کد) بگذارید و آدرس آن را جایگزین کنید.

همهٔ پیکربندی‌ها

رفتار و دسترس‌پذیری

• Escape و کلیک روی پس‌زمینه پنل overlay را می‌بندند؛ هنگام باز شدن فوکوس به پنل می‌رود.
• پنل بستهٔ overlay با inertکپی کد از کیبورد و درخت دسترسی خارج است.
• پس‌زمینهٔ کدر و تصویر تزئینی aria-hiddenکپی کد هستند.
• در حالت ریل برچسب هر مقصد برای صفحه‌خوان می‌ماند و زیرآیتم‌ها به‌صورت نقطه نشان داده می‌شوند.
• محدودیت فعلی: تله‌فوکوس وجود ندارد و بعد از بستن، فوکوس به دکمهٔ باز کننده برنمی‌گردد؛ صفحهٔ مصرف‌کننده باید این را مدیریت کند.
• حرکت از نام‌های معنایی overlay.drawer.slideکپی کد و overlay.backdropکپی کد می‌آید و در prefers-reduced-motionکپی کد حذف می‌شود.

ناوبری کناری سایت مستندات

ستون ناوبری همین صفحه‌های مستندات (apps/docs/src/site/Shell.tsxکپی کد، کامپوننت NavGroupکپی کد) با همان الگوی بالا ساخته شده و چند رفتار اضافه دارد:

• گروه‌های بازشونده: با کلیک روی نام هر گروه زیرمنوهایش باز یا بسته می‌شوند. گروه فعلی هنگام ورود به صفحه از پیش باز است.
• اسکرول تا زیرمنوها: اگر گروهی از پایین ستون باز شود، زیرمنوهایش بیرون از دید می‌مانند. پس از باز شدن، فهرست ناوبری خودش به‌اندازهٔ لازم اسکرول می‌شود تا انتهای گروه دیده شود. صفحه اسکرول نمی‌شود، فقط ستون ناوبری.
• کاهش حرکت: اگر prefers-reduced-motionکپی کد فعال باشد، این اسکرول بدون انیمیشن انجام می‌شود.
• ستون ثابت: ستون در دسکتاپ با stickyکپی کد کنار محتوا می‌ماند و ارتفاعش برابر فضای زیر نوار بالاست؛ فهرست داخلی آن جدا از صفحه اسکرول می‌شود.

توکن‌ها

فقط توکن‌های موجود: سطح (surface-raisedکپی کد، surface-sunkenکپی کد)، متن (fg-defaultکپی کد، fg-mutedکپی کد)، حاشیه، سایه، عرض ناوبری و توکن‌های overlay. هیچ توکن یا گرادیان جدیدی تعریف نشده است.