پنل ناوبری کناری — SideNavigation

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

وضعیت: beta · لایه: ۳ () · کد:

TSX

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

کی استفاده کنیم

بیش از چهار مقصد یا ساختار دو سطحی (پنل مدیریت، مستندات).
ناوبری دائمی در دسکتاپ. در موبایل با همین ناوبری یا .
عمق بیش از دو سطح را نپذیرد؛ برای عمیق‌تر از کمک بگیرید.

نمونهٔ زنده

کد قابل کپی

پایه با گروه‌ها

TSX

import { Icon } from '@tokapps/icons';import { SideNavigation } from '@tokapps/tuk';const sections = [  {    id: 'main',    heading: 'اصلی',    items: [      { id: 'home', label: 'خانه', href: '/', icon: <Icon name="home" size="sm" />, current: true },      {        id: 'ideas',        label: 'ایده‌ها',        icon: <Icon name="product.ideation" size="sm" />,        children: [          { id: 'open', label: 'باز', href: '/ideas/open' },          { id: 'closed', label: 'بسته', href: '/ideas/closed' },        ],      },    ],  },];export function AppSide() {  return <SideNavigation sections={sections} aria-label="ناوبری اصلی" />;}

حالت ریل

TSX

<SideNavigation sections={sections} collapsed />

ساختار و پراپ‌ها

پراپ	نوع	توضیح
		هر بخش ، اختیاری و دارد
		زیرمقصدها؛ گروه با باز می‌شود
		حالت ریل: فقط آیکون
		برچسب ناحیه
		رفتار چاپ

RTL، کیبورد و صفحه‌خوان

نوار کناری در RTL به سمت راست می‌آید.
هر گروه یک دکمه با است؛ با Enter یا Space باز و بسته می‌شود.
گروه‌ها دارند و مقصد فعلی با اعلام می‌شود.

صدا، حرکت، چاپ و کاهش حرکت

صدا ندارد.
رفتار چاپ از پراپ تعیین می‌شود.

تغییرات ممنوع

برچسب‌ها را در حالت ریل حذف نکنید؛ فقط بصری پنهان می‌شوند.
بیش از دو سطح تودرتو نسازید.

پنل ناوبری کناری — SideNavigation

وضعیت: beta · لایه: ۳ () · کد:

TSX

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

کی استفاده کنیم

بیش از چهار مقصد یا ساختار دو سطحی (پنل مدیریت، مستندات).

ناوبری دائمی در دسکتاپ. در موبایل با همین ناوبری یا .

عمق بیش از دو سطح را نپذیرد؛ برای عمیق‌تر از کمک بگیرید.

کد قابل کپی

پایه با گروه‌ها

TSX

import { Icon } from '@tokapps/icons';import { SideNavigation } from '@tokapps/tuk';const sections = [  {    id: 'main',    heading: 'اصلی',    items: [      { id: 'home', label: 'خانه', href: '/', icon: <Icon name="home" size="sm" />, current: true },      {        id: 'ideas',        label: 'ایده‌ها',        icon: <Icon name="product.ideation" size="sm" />,        children: [          { id: 'open', label: 'باز', href: '/ideas/open' },          { id: 'closed', label: 'بسته', href: '/ideas/closed' },        ],      },    ],  },];export function AppSide() {  return <SideNavigation sections={sections} aria-label="ناوبری اصلی" />;}

حالت ریل

TSX

<SideNavigation sections={sections} collapsed />

ساختار و پراپ‌ها

پراپ	نوع	توضیح
		هر بخش ، اختیاری و دارد
		زیرمقصدها؛ گروه با باز می‌شود
		حالت ریل: فقط آیکون
		برچسب ناحیه
		رفتار چاپ

RTL، کیبورد و صفحه‌خوان

نوار کناری در RTL به سمت راست می‌آید.

هر گروه یک دکمه با است؛ با Enter یا Space باز و بسته می‌شود.

گروه‌ها دارند و مقصد فعلی با اعلام می‌شود.