زبانهای تب (Tabs)
تبها به سازماندهی محتوای مرتبط در یک نمای واحد کمک میکنند که برای کاربر آسانتر است تا بین نماهای مختلف جابجا شود و مرور کند.
پیشفرض (Default)
استفاده از تبهای پیشفرض.
خانه
پروفایل
تماس
اگر سازندگان ساختمانها را همانطور که برنامهنویسان کد مینویسند میساختند، اولین دارکوبی که میآمد تمدن را نابود میکرد. (جرالد واینبرگ)
پیل (Pill)
شما میتوانید سبک تبها را با تنظیم
variant به پیل تغییر دهید.خانه
پروفایل
تماس
اگر سازندگان ساختمانها را همانطور که برنامهنویسان برنامهها را مینویسند، میساختند، اولین دارکوبی که میآمد، تمدن را نابود میکرد. (جرالد واینبرگ)
آیکونها (Icons)
پراپ
icon در TabNav به ما اجازه میدهد آیکنها را با فاصله خودکار وارد کنیم.خانه
پروفایل
تماس
اگر سازندگان ساختمانها را همانطور که برنامهنویسان برنامهها را مینویسند، میساختند، اولین دارکوبی که میآمد، تمدن را نابود میکرد. (جرالد واینبرگ)
غیرفعال (Disabled)
با تنظیم
disabled در TabNav از کلیک شدن جلوگیری میکنید.خانه
پروفایل
تماس
خانه
پروفایل
تماس
تبهای کنترلی (Controlled Tabs)
مثالی از تبهای کنترلی.
خانه
پروفایل
تماس
اگر سازندگان ساختمانها را همانطور که برنامهنویسان کد مینویسند میساختند، اولین دارکوبی که میآمد تمدن را نابود میکرد. (جرالد واینبرگ)
API
تبها (Tabs)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| defaultValue | مقدار اولیه برای تبهای غیرکنترلی | string | - |
| onChange | کالبک وقتی که مقدار تب تغییر میکند | (tabValue: string) => void | - |
| value | مقدار کنترلی برای فعالسازی تب | string | - |
| variant | سبک تبها | 'underline' | 'pill' | - |
لیست تبها (Tabs.TabList)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|
ناوبری تبها (Tabs.TabNav)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| disabled | آیا تب غیرفعال باشد | boolean | - |
| icon | آیکون تب | ReactNode | string | - |
| value(*) | مقدار منحصر به فرد که با TabContent مطابقت دارد | string | - |
محتوای تبها (Tabs.TabContent)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| value(*) | مقدار منحصر به فرد که با TabNav مطابقت دارد | string | - |