Tabs

کامپوننت Tabs برای گروه‌بندی محتوا در پنل‌های هم‌مکان استفاده می‌شود؛ مثل بخش‌های صفحه‌ی پروفایل. کامپوننت compound است و از چهار بخش تشکیل شده که state را از طریق Context به اشتراک می‌گذارند.

Import

import { Tabs } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

<Tabs.Root defaultValue="profile">
  <Tabs.List>
    <Tabs.Tab value="profile">پروفایل</Tabs.Tab>
    <Tabs.Tab value="security">امنیت</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="profile">اطلاعات پروفایل کاربر</Tabs.Panel>
  <Tabs.Panel value="security">تنظیمات امنیتی</Tabs.Panel>
</Tabs.Root>

Playground

اطلاعات پروفایل کاربر

تنظیمات امنیتی و رمز عبور

تنظیمات کلی حساب

Structure

• Tabs.Root — ظرف اصلی؛ تب فعال را نگه می‌دارد. defaultValue تب اولیه را مشخص می‌کند
• Tabs.List — نوار تب‌ها
• Tabs.Tab — دکمه‌ی هر تب (با value یکتا)
• Tabs.Panel — محتوای هر تب؛ فقط پنل تب فعال رندر می‌شود (بقیه از DOM حذف می‌شوند، پس state داخلی پنل‌های مخفی حفظ نمی‌شود)

Tab و Panel باید داخل Root استفاده شوند؛ در غیر این صورت خطای واضحی می‌گیری.

Disabled Tab

با disabled روی Tabs.Tab می‌توانی یک تب را غیرفعال کنی — مثلاً بخشی که هنوز آماده نیست.

<Tabs.Tab value="billing" disabled>
  پرداخت
</Tabs.Tab>

تب غیرفعال کلیک نمی‌شود و با کلیک روی آن مقدار تب فعال تغییر نمی‌کند.

Accessibility

• نوار تب‌ها با role="tablist"، دکمه‌ها با role="tab" و پنل‌ها با role="tabpanel" پیاده شده‌اند.
• تب فعال با aria-selected علامت می‌خورد.
• محدودیت شناخته‌شده: پیمایش بین تب‌ها با کلیدهای جهت در حال حاضر پشتیبانی نمی‌شود؛ تب‌ها به‌صورت دکمه‌ی معمولی با Tab قابل دسترسی‌اند.
• در API فعلی aria-controls و aria-labelledby به‌صورت خودکار تولید نمی‌شوند. اگر این ارتباط برای سناریوی شما مهم است، آن را با wrapper یا نسخه‌ی سفارشی تکمیل کن.

Data Attributes and Customize CSS

Tabs hookهای پایدار زیر را ارائه می‌کند:

Attribute	کاربرد
data-fara-tabs	ریشه‌ی Tabs
data-fara-tabs-list	نوار تب‌ها با role="tablist"
data-fara-tabs-tab	هر دکمه‌ی تب
data-active	تب فعال
data-fara-tabs-panel	پنل فعال با role="tabpanel"

<Tabs.Root className="account-tabs" defaultValue="profile">
  <Tabs.List>
    <Tabs.Tab value="profile">پروفایل</Tabs.Tab>
    <Tabs.Tab value="security">امنیت</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="profile">اطلاعات پروفایل</Tabs.Panel>
  <Tabs.Panel value="security">تنظیمات امنیتی</Tabs.Panel>
</Tabs.Root>

[data-fara-tabs-list] {
  gap: 8px;
  border-bottom: 1px solid #e2e8f0;
}

[data-fara-tabs-tab][data-active] {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
}

[data-fara-tabs-tab]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

[data-fara-tabs-panel] {
  padding-block: 16px;
}

className فقط روی Tabs.Root اعمال می‌شود. برای استایل List، Tab و Panel از data attributes استفاده کن؛ این سه بخش prop className ندارند.

Important State Notes

Tabs در API فعلی uncontrolled است:

<Tabs.Root defaultValue="profile">{/* تغییر تب داخل خود Root مدیریت می‌شود */}</Tabs.Root>

defaultValue فقط هنگام mount مقدار اولیه را تعیین می‌کند و تغییر آن بعداً تب فعال را عوض نمی‌کند. پنل‌های غیرفعال از DOM حذف می‌شوند؛ بنابراین اگر state داخلی مهمی داری، آن را در والد Tabs نگه دار.

Props — Tabs.Root

Prop	Type	Default	Description
defaultValue	string	-	value تب اولیه (الزامی)
children	ReactNode	-	محتوا (الزامی)
className	string	-	کلاس CSS اضافی برای سفارشی‌سازی

Props — Tabs.List

Prop	Type	Description
children	ReactNode	تب‌ها (الزامی)

Props — Tabs.Tab

Prop	Type	Default	Description
value	string	-	شناسه‌ی تب (الزامی)
children	ReactNode	-	متن تب (الزامی)
disabled	boolean	false	غیرفعال کردن تب

Props — Tabs.Panel

Prop	Type	Description
value	string	شناسه‌ی تب متناظر (الزامی)
children	ReactNode	محتوای پنل (الزامی)