Tabs
محتوا را در چند بخش جدا سازماندهی میکند؛ ناوبری بین برگهها با کلیدهای جهتدار صفحهکلید هم کار میکند.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/tabs.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/tabs.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/tabs.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/tabs.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
<Tabs defaultValue="tab1">
<TabsList>
<TabsTrigger value="tab1">برگه ۱</TabsTrigger>
<TabsTrigger value="tab2">برگه ۲</TabsTrigger>
</TabsList>
<TabsContent value="tab1">محتوای برگه ۱</TabsContent>
</Tabs>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
دسترسپذیری
- با کلیدهای جهتدار راست/چپ بین برگهها جابهجا میشود؛ چون خودِ کامپوننت جهت را از نزدیکترین [dir] میخواند، جهت این ناوبری با چیدمان بصری همخوان است.
- فقط یک TabsTrigger در هر لحظه tabindex=0 دارد (roving tabindex) و بقیه با کلید Tab قابل دسترسی نیستند تا پیمایش سریعتر شود.
مرجع API
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| defaultValue | string | — | برگهٔ فعال در حالت کنترلنشده. |
| value / onValueChange | string / (value: string) => void | — | برای مدیریت کنترلشدهٔ برگهٔ فعال. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
With Forms
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
forceMount: ماندن در DOM
بهطور پیشفرض، محتوای برگهٔ غیرفعال از DOM حذف میشود. سه جا این را نمیخواهید: فرمی که باید مقدارش را نگه دارد یا با submit ارسال شود، محتوایی که با Ctrl+F پیدا شود، و صفحهای که خزنده یا ایجنت باید کاملش را بخواند. با forceMount محتوا میماند و فقط با ویژگی hidden پنهان میشود.
این متن حتی وقتی برگهٔ دیگری فعال است هم در DOM میماند.
با Ctrl+F میشود متن هر دو برگه را پیدا کرد.
بدون forceMount، محتوای برگهٔ غیرفعال از DOM حذف میشود: نه با Ctrl+F پیدا میشود، نه خزندهٔ موتور جستجو میبیندش، نه فرمِ داخلش مقدارش را نگه میدارد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
برگههای زیاد (Overflow)
نوار برگهها را اسکرولپذیر کنید، نه اینکه در چند سطر بشکند. شکستن، ارتفاع صفحه را با هر انتخاب عوض میکند و جای برگهٔ فعال جابهجا میشود.
اگر برگهها جا نشوند، نوار را اسکرولپذیر کنید. شکستن در چند سطر، ارتفاع صفحه را عوض میکند و برگهٔ فعال گم میشود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
در حال دریافت (Loading)
خودِ برگهها را با جای خالی جایگزین نکنید؛ کاربر باید بتواند بین برگهها حرکت کند حتی وقتی محتوای یکی هنوز نرسیده. فقط بدنه جای خالی میگیرد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| With Forms | صفحهٔ تنظیمات حساب که هر برگه فرم مستقل خودش را دارد |
| forceMount: ماندن در DOM | محتوایی که باید با Ctrl+F یا خزندهٔ موتور جستجو پیدا شود |
| برگههای زیاد (Overflow) | فیلترهای وضعیت که تعدادشان از عرض نوار بیشتر است |
| در حال دریافت (Loading) | برگهای که محتوایش با انتخاب شدن گرفته میشود |
دستورالعمل استفاده
برچسبهای کوتاه و هموزن
انجام بده
چون TabsTriggerها فضای TabsList را با flex-1 برابر تقسیم میکنند، اسمهایی همطول و همجنس (اسم یا فعل، نه قاطی) بگذارید تا نوار برگهها متعادل بماند.
انجام نده
ترکیب یک برچسب تککلمهای با یک جملهٔ بلند، عرض برگهها را نامتوازن میکند و نوار را کج و نامرتب نشان میدهد.
برای بخشهای همسطح، نه مراحل پشتسرهم
انجام بده
Tabs برای بخشهایی است که کاربر میتواند به هر ترتیبی بین آنها جابهجا شود، مثل تنظیمات حساب در برابر تنظیمات رمز عبور.
انجام نده
برای مراحل ترتیبی مثل «اطلاعات → پرداخت → تأیید» از Tabs استفاده نکنید؛ چون همهٔ برگهها همیشه فعال و قابل کلیکاند، کاربر میتواند بدون تکمیل مرحلهٔ قبل به مرحلهٔ بعد بپرد.