Tabsv1.1.0
محتوا را در چند بخش جدا سازمان‌دهی می‌کند؛ ناوبری بین برگه‌ها با کلیدهای جهت‌دار صفحه‌کلید هم کار می‌کند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/tabs.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/tabs.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/tabs.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/tabs.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
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 پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
دسترس‌پذیری
- با کلیدهای جهت‌دار راست/چپ بین برگه‌ها جابه‌جا می‌شود؛ چون خودِ کامپوننت جهت را از نزدیک‌ترین [dir] می‌خواند، جهت این ناوبری با چیدمان بصری هم‌خوان است.
- فقط یک TabsTrigger در هر لحظه tabindex=0 دارد (roving tabindex) و بقیه با کلید Tab قابل دسترسی نیستند تا پیمایش سریع‌تر شود.
مرجع API
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| defaultValue | string | — | برگهٔ فعال در حالت کنترل‌نشده. |
| value / onValueChange | string / (value: string) => void | — | برای مدیریت کنترل‌شدهٔ برگهٔ فعال. |
| interaction | "none" | "press" | "slide" | "stretch" | "none" | واکنش برگه‌ها: press کوچک شدن هنگام فشردن، slide لغزش قرص برگهٔ فعال، stretch جابه‌جایی کش‌دار قرص. slide و stretch شامل press هم هستند. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
With Forms
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
اینتراکشن (interaction)
روی خود Tabs داده می‌شود. press برگه را هنگام فشردن کمی کوچک می‌کند؛ slide یک قرص واحد را از برگهٔ قبلی تا برگهٔ جدید می‌لغزاند؛ stretch قرص را کش می‌دهد: لبهٔ جلو اول می‌رود و لبهٔ عقب دنبالش می‌آید، پس کاربر مسیر حرکت را می‌بیند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
forceMount: ماندن در DOM
به‌طور پیش‌فرض، محتوای برگهٔ غیرفعال از DOM حذف می‌شود. سه جا این را نمی‌خواهید: فرمی که باید مقدارش را نگه دارد یا با submit ارسال شود، محتوایی که با Ctrl+F پیدا شود، و صفحه‌ای که خزنده یا ایجنت باید کاملش را بخواند. با forceMount محتوا می‌ماند و فقط با ویژگی hidden پنهان می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
برگه‌های زیاد (Overflow)
نوار برگه‌ها را اسکرول‌پذیر کنید، نه اینکه در چند سطر بشکند. شکستن، ارتفاع صفحه را با هر انتخاب عوض می‌کند و جای برگهٔ فعال جابه‌جا می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
در حال دریافت (Loading)
خودِ برگه‌ها را با جای خالی جایگزین نکنید؛ کاربر باید بتواند بین برگه‌ها حرکت کند حتی وقتی محتوای یکی هنوز نرسیده. فقط بدنه جای خالی می‌گیرد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| With Forms | صفحهٔ تنظیمات حساب که هر برگه فرم مستقل خودش را دارد |
| اینتراکشن (interaction) | روی خود Tabs داده می‌شود |
| forceMount: ماندن در DOM | محتوایی که باید با Ctrl+F یا خزندهٔ موتور جستجو پیدا شود |
| برگه‌های زیاد (Overflow) | فیلترهای وضعیت که تعدادشان از عرض نوار بیشتر است |
| در حال دریافت (Loading) | برگه‌ای که محتوایش با انتخاب شدن گرفته می‌شود |
دستورالعمل استفاده
برچسب‌های کوتاه و هم‌وزن
انجام بده
چون TabsTriggerها فضای TabsList را با flex-1 برابر تقسیم می‌کنند، اسم‌هایی هم‌طول و هم‌جنس (اسم یا فعل، نه قاطی) بگذارید تا نوار برگه‌ها متعادل بماند.
انجام نده
ترکیب یک برچسب تک‌کلمه‌ای با یک جملهٔ بلند، عرض برگه‌ها را نامتوازن می‌کند و نوار را کج و نامرتب نشان می‌دهد.
برای بخش‌های هم‌سطح، نه مراحل پشت‌سرهم
انجام بده
Tabs برای بخش‌هایی است که کاربر می‌تواند به هر ترتیبی بین آن‌ها جابه‌جا شود، مثل تنظیمات حساب در برابر تنظیمات رمز عبور.
انجام نده
برای مراحل ترتیبی مثل «اطلاعات → پرداخت → تأیید» از Tabs استفاده نکنید؛ چون همهٔ برگه‌ها همیشه فعال و قابل کلیک‌اند، کاربر می‌تواند بدون تکمیل مرحلهٔ قبل به مرحلهٔ بعد بپرد.