تب‌ها — Tabs

بین بخش‌های هم‌سطح یک صفحه یا یک موجودیت جابه‌جا می‌شود، و هر بخش پنل محتوای خودش را دارد؛ فقط پنل انتخاب‌شده نمایش داده می‌شود. ظاهر آن همان ظاهر SegmentedNavigation است: یک حباب متحرک پشت تب فعال. ظاهر دومی برای تب وجود ندارد.

برای انتخاب یک مقدار یا نمای همان داده (بدون پنل)، از SegmentedNavigation استفاده کنید.
برای ناوبری بین صفحه‌ها، از TopNavigation یا Sidebar.
برای مراحل ترتیبی، از Stepper.

نقش‌های ARIA، roving tabindex و جهت کلیدها را React Aria تأمین می‌کند.

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

TSX

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

نمونهٔ زنده

ایده‌ها۱۲

نظرها

بایگانی

به‌زودی

فهرست ایده‌های فعال.

ایده‌ها۱۲

نظرها

بایگانی

به‌زودی

فهرست ایده‌های فعال.

ایده‌ها۱۲

نظرها

بایگانی

به‌زودی

فهرست ایده‌های فعال.

ایده‌ها۱۲

نظرها

بایگانی

به‌زودی

فهرست ایده‌های فعال.

کد قابل کپی

پایه

TSX

import { Icon } from '@tokapps/icons';import { Tabs } from '@tokapps/tuk';const items = [  { id: 'ideas', label: 'ایده‌ها', icon: <Icon name="product.ideation" size="sm" />, badge: '۱۲', content: <p>فهرست ایده‌های فعال.</p> },  { id: 'comments', label: 'نظرها', icon: <Icon name="comment" size="sm" />, content: <p>گفتگوهای اخیر.</p> },  { id: 'archive', label: 'بایگانی', content: <p>موارد بسته‌شده.</p> },  { id: 'soon', label: 'به‌زودی', disabled: true, content: null },];export function ProfileTabs() {  return <Tabs items={items} aria-label="بخش‌های پروفایل" />;}

عرض کامل

TSX

import { Tabs } from '@tokapps/tuk';export function FullWidthTabs() {  return (    <Tabs      fullWidth      aria-label="بخش‌های پروفایل"      items={[        { id: 'ideas', label: 'ایده‌ها', content: <p>فهرست ایده‌های فعال.</p> },        { id: 'comments', label: 'نظرها', content: <p>گفتگوهای اخیر.</p> },      ]}    />  );}

عمودی با فعال‌سازی دستی

TSX

import { Tabs } from '@tokapps/tuk';export function SettingsTabs() {  return (    <Tabs      orientation="vertical"      keyboardActivation="manual"      defaultSelectedKey="general"      aria-label="بخش‌های تنظیمات"      items={[        { id: 'general', label: 'عمومی', content: <p>تنظیمات عمومی.</p> },        { id: 'privacy', label: 'حریم خصوصی', content: <p>تنظیمات حریم خصوصی.</p> },        { id: 'billing', label: 'پرداخت', href: '/settings/billing', content: null },      ]}    />  );}

کنترل‌شده

TSX

import { useState } from 'react';import { Tabs } from '@tokapps/tuk';export function ControlledTabs() {  const [section, setSection] = useState('general');  return (    <Tabs      selectedKey={section}      onSelectionChange={setSection}      aria-label="بخش‌های تنظیمات داک"      fullWidth      items={[        { id: 'general', label: 'کلی', content: <p>تم، جهت، حرکت.</p> },        { id: 'alerts', label: 'هشدارها', content: <p>محل نمایش هشدارها.</p> },      ]}    />  );}

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

نوع	پیش‌فرض	توضیح
	— (الزامی)	فهرست تب‌ها. هر آیتم: و و (الزامی)، ، ، ، .
	—	کلید تب انتخاب‌شده؛ کامپوننت را کنترل‌شده می‌کند.
	اولین تب غیرفعال	تب اولیه در حالت غیرکنترل‌شده.
	—	با تغییر تب اجرا می‌شود.
·		جهت فهرست. در عمودی کلیدهای و کار می‌کنند.
·		با فوکوس تب را انتخاب می‌کند؛ با یا .
		تب‌ها عرض را مساوی پر می‌کنند.
		نام برای صفحه‌خوان.
	—	مقصد صدای برای همین نمونه.
·		همهٔ پنل‌ها را در چاپ نشان می‌دهد؛ کل کامپوننت را پنهان می‌کند.
·	از محیط	جهت محلی.
	—	کلاس روی ریشه.

پراپ وجود ندارد: ظاهر تب‌ها یکی است (بند «باید و نباید»). پراپ روی Tabs نیست؛ برای بی‌صدا کردن، ندهید و مقصد سراسری ثبت نکنید.

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

code

div[data-tds="tabs"][data-orientation][data-full-width]? [data-print]  ├─ div[role=tablist][data-part="list"][data-indicator="bubble"]  │     ├─ حباب متحرک (::before، از CSS مشترک)  │     └─ div[role=tab][data-part="tab"] × N  │           ├─ آیکون؟  │           ├─ span[data-part="label"]  │           └─ span[data-part="badge"]?  └─ div[role=tabpanel][data-part="panel"] × N (فقط پنل فعال نمایش داده می‌شود)

، ، ، و بنیان ثابت‌اند. آیکون، برچسب، نشان و محتوای پنل قابل تغییرند.

همهٔ حالت‌ها

حالت	نشانه	نمایش
پیش‌فرض		متن
hover		متن
selected	و	حباب پشت تب؛ متن پررنگ
focus-visible		حلقهٔ فوکوس
disabled	و	کم‌رنگ با ؛ خارج از پیمایش
جابه‌جایی	تغییر	حباب با و به تب بعدی سُر می‌خورد
کاهش حرکت	یا	جابه‌جایی فوری

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

RTL: و در RTL معکوس می‌شوند. ترتیب تب‌ها از راست است و حباب از همان جهت جابه‌جا می‌شود.
کیبورد: (در عمودی ) حرکت بین تب‌ها؛ و اولین و آخرین؛ وارد و سپس پنل. در ، یا انتخاب می‌کند.
صفحه‌خوان: با ؛ هر تب و ؛ پنل با از تب.

صدا، حرکت، چاپ

صدا: هنگام تغییر تب پخش می‌شود؛ opt-in است. معادل بصری: حباب و .
حرکت: حباب با توکن‌های حرکت جابه‌جا می‌شود. تم فقط این حرکت را از راه توکن عوض می‌کند؛ و تنظیم کاربر همیشه برنده‌اند.
چاپ: پیش‌فرض ؛ همهٔ پنل‌ها در چاپ دیده می‌شوند.

باید و نباید

باید

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

نباید

را برای انتخاب یک مقدار بدون پنل به کار ببرید (از استفاده کنید).
ظاهر دیگری مثل خط زیرین یا قرص محلی بسازید؛ محلی در هم باید به تبدیل شود.
رنگ خام، گرادیان یا منفی برای نشانگر بنویسید؛ نشانگر از CSS مشترک می‌آید.
نشانگر یا حباب را در تم پنهان کنید یا وزن و پس‌زمینهٔ تب فعال را حذف کنید؛ انتخاب نباید فقط با رنگ نشان داده شود.
تب را فقط با کلیک قابل دسترس کنید؛ کیبورد باید همان کار را بکند.

موارد استفاده در سامانه

محل	استفاده
شیت داک، تنظیمات سریع	: «کلی» و «هشدارها»
نمونه‌ها و مستندات	با ، ، ،

فهرست کامل و وضعیت تبدیل موارد باقی‌مانده در ARCH.md بند ۱۶ آمده است.

توکن‌ها

معنایی: ، ، ، ، ، ، ، .
کامپوننتی (ظاهر مشترک): (padding، gap، radius، bg، fg، selected-bg، selected-fg، block-size، font-size، transition، disabled-opacity).
حرکت: ، .
فهرست مصرفی: و .

تب‌ها — Tabs

برای انتخاب یک مقدار یا نمای همان داده (بدون پنل)، از SegmentedNavigation استفاده کنید.
برای ناوبری بین صفحه‌ها، از TopNavigation یا Sidebar.
برای مراحل ترتیبی، از Stepper.

نقش‌های ARIA، roving tabindex و جهت کلیدها را React Aria تأمین می‌کند.

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

TSX

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

نمونهٔ زنده

ایده‌ها۱۲

نظرها

بایگانی

به‌زودی

فهرست ایده‌های فعال.

ایده‌ها۱۲

نظرها

بایگانی

به‌زودی

فهرست ایده‌های فعال.

ایده‌ها۱۲

نظرها

بایگانی

به‌زودی

فهرست ایده‌های فعال.

ایده‌ها۱۲

نظرها

بایگانی

به‌زودی

فهرست ایده‌های فعال.

کد قابل کپی

پایه

TSX

import { Icon } from '@tokapps/icons';import { Tabs } from '@tokapps/tuk';const items = [  { id: 'ideas', label: 'ایده‌ها', icon: <Icon name="product.ideation" size="sm" />, badge: '۱۲', content: <p>فهرست ایده‌های فعال.</p> },  { id: 'comments', label: 'نظرها', icon: <Icon name="comment" size="sm" />, content: <p>گفتگوهای اخیر.</p> },  { id: 'archive', label: 'بایگانی', content: <p>موارد بسته‌شده.</p> },  { id: 'soon', label: 'به‌زودی', disabled: true, content: null },];export function ProfileTabs() {  return <Tabs items={items} aria-label="بخش‌های پروفایل" />;}

عرض کامل

TSX

import { Tabs } from '@tokapps/tuk';export function FullWidthTabs() {  return (    <Tabs      fullWidth      aria-label="بخش‌های پروفایل"      items={[        { id: 'ideas', label: 'ایده‌ها', content: <p>فهرست ایده‌های فعال.</p> },        { id: 'comments', label: 'نظرها', content: <p>گفتگوهای اخیر.</p> },      ]}    />  );}

عمودی با فعال‌سازی دستی

TSX

import { Tabs } from '@tokapps/tuk';export function SettingsTabs() {  return (    <Tabs      orientation="vertical"      keyboardActivation="manual"      defaultSelectedKey="general"      aria-label="بخش‌های تنظیمات"      items={[        { id: 'general', label: 'عمومی', content: <p>تنظیمات عمومی.</p> },        { id: 'privacy', label: 'حریم خصوصی', content: <p>تنظیمات حریم خصوصی.</p> },        { id: 'billing', label: 'پرداخت', href: '/settings/billing', content: null },      ]}    />  );}

کنترل‌شده

TSX

import { useState } from 'react';import { Tabs } from '@tokapps/tuk';export function ControlledTabs() {  const [section, setSection] = useState('general');  return (    <Tabs      selectedKey={section}      onSelectionChange={setSection}      aria-label="بخش‌های تنظیمات داک"      fullWidth      items={[        { id: 'general', label: 'کلی', content: <p>تم، جهت، حرکت.</p> },        { id: 'alerts', label: 'هشدارها', content: <p>محل نمایش هشدارها.</p> },      ]}    />  );}

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

نوع	پیش‌فرض	توضیح
	— (الزامی)	فهرست تب‌ها. هر آیتم: و و (الزامی)، ، ، ، .
	—	کلید تب انتخاب‌شده؛ کامپوننت را کنترل‌شده می‌کند.
	اولین تب غیرفعال	تب اولیه در حالت غیرکنترل‌شده.
	—	با تغییر تب اجرا می‌شود.
·		جهت فهرست. در عمودی کلیدهای و کار می‌کنند.
·		با فوکوس تب را انتخاب می‌کند؛ با یا .
		تب‌ها عرض را مساوی پر می‌کنند.
		نام برای صفحه‌خوان.
	—	مقصد صدای برای همین نمونه.
·		همهٔ پنل‌ها را در چاپ نشان می‌دهد؛ کل کامپوننت را پنهان می‌کند.
·	از محیط	جهت محلی.
	—	کلاس روی ریشه.

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

code

div[data-tds="tabs"][data-orientation][data-full-width]? [data-print]  ├─ div[role=tablist][data-part="list"][data-indicator="bubble"]  │     ├─ حباب متحرک (::before، از CSS مشترک)  │     └─ div[role=tab][data-part="tab"] × N  │           ├─ آیکون؟  │           ├─ span[data-part="label"]  │           └─ span[data-part="badge"]?  └─ div[role=tabpanel][data-part="panel"] × N (فقط پنل فعال نمایش داده می‌شود)

، ، ، و بنیان ثابت‌اند. آیکون، برچسب، نشان و محتوای پنل قابل تغییرند.

همهٔ حالت‌ها

حالت	نشانه	نمایش
پیش‌فرض		متن
hover		متن
selected	و	حباب پشت تب؛ متن پررنگ
focus-visible		حلقهٔ فوکوس
disabled	و	کم‌رنگ با ؛ خارج از پیمایش
جابه‌جایی	تغییر	حباب با و به تب بعدی سُر می‌خورد
کاهش حرکت	یا	جابه‌جایی فوری

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

RTL: و در RTL معکوس می‌شوند. ترتیب تب‌ها از راست است و حباب از همان جهت جابه‌جا می‌شود.
کیبورد: (در عمودی ) حرکت بین تب‌ها؛ و اولین و آخرین؛ وارد و سپس پنل. در ، یا انتخاب می‌کند.
صفحه‌خوان: با ؛ هر تب و ؛ پنل با از تب.

صدا، حرکت، چاپ

صدا: هنگام تغییر تب پخش می‌شود؛ opt-in است. معادل بصری: حباب و .
حرکت: حباب با توکن‌های حرکت جابه‌جا می‌شود. تم فقط این حرکت را از راه توکن عوض می‌کند؛ و تنظیم کاربر همیشه برنده‌اند.
چاپ: پیش‌فرض ؛ همهٔ پنل‌ها در چاپ دیده می‌شوند.

باید و نباید

باید

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

نباید

را برای انتخاب یک مقدار بدون پنل به کار ببرید (از استفاده کنید).
ظاهر دیگری مثل خط زیرین یا قرص محلی بسازید؛ محلی در هم باید به تبدیل شود.
رنگ خام، گرادیان یا منفی برای نشانگر بنویسید؛ نشانگر از CSS مشترک می‌آید.
نشانگر یا حباب را در تم پنهان کنید یا وزن و پس‌زمینهٔ تب فعال را حذف کنید؛ انتخاب نباید فقط با رنگ نشان داده شود.
تب را فقط با کلیک قابل دسترس کنید؛ کیبورد باید همان کار را بکند.

موارد استفاده در سامانه

محل	استفاده
شیت داک، تنظیمات سریع	: «کلی» و «هشدارها»
نمونه‌ها و مستندات	با ، ، ،

فهرست کامل و وضعیت تبدیل موارد باقی‌مانده در ARCH.md بند ۱۶ آمده است.

توکن‌ها

معنایی: ، ، ، ، ، ، ، .
کامپوننتی (ظاهر مشترک): (padding، gap، radius، bg، fg، selected-bg، selected-fg، block-size، font-size، transition، disabled-opacity).
حرکت: ، .
فهرست مصرفی: و .