تم تاریک
تب Tab
کامپوننت Tab برای جابهجایی (Switch) بین چند نمای مرتبط در یک صفحه استفاده میشود. هر تب نمایانگر یک بخش/حالت است و با انتخاب آن، محتوای مربوط به همان بخش نمایش داده میشود. Tab به کاربران کمک میکند بدون ترک کردن صفحه، بین دستهبندیها یا حالتهای مختلف حرکت کنند.
نمونه زنده
محتوای نمای کلی در این بخش نمایش داده میشود.
انواع
حالت پیشفرض
زمانی استفاده میشود که بخشی از صفحه، مانند محتوای یک سکشن، کارت یا بلوک، نیاز به جابهجایی بین چند دسته یا حالت مختلف داشته باشد.
مسطح
زمانی استفاده میشود که تب به پایین Subheader متصل است و با انتخاب هر گزینه، محتوای کل صفحه تغییر میکند یا ناوبری اصلی درونصفحهای جابهجا میشود.
آناتومی
حالت پیشفرض
- Icon (optional): آیکون یک عنصر اختیاری است که میتواند برای تقویت معنی هر تب و کمک به تشخیص سریعتر آن استفاده شود.
- Label: برچسب، عنوان متنی هر تب است و باید بهصورت واضح نشان دهد با انتخاب آن چه محتوایی نمایش داده میشود.
- Active Item: آیتم فعال، تبی است که در حال حاضر انتخاب شده و محتوای مرتبط با آن به کاربر نمایش داده میشود.
- Deactive Item: آیتم غیرفعال، تبی است که در حال حاضر انتخاب نشده اما کاربر میتواند برای جابهجایی محتوا آن را انتخاب کند.
- Disable Item: آیتم غیرفعالشده، تبی است که در حال حاضر در دسترس نیست و کاربر امکان انتخاب یا تعامل با آن را ندارد.
- Container: کانتینر، محدودهای است که مجموعه تبها را در بر میگیرد و آنها را بهصورت یک گروه منسجم نمایش میدهد.
مسطح
- Icon (optional): آیکون یک عنصر اختیاری است که میتواند برای تقویت معنی هر تب و کمک به تشخیص سریعتر آن استفاده شود.
- Label: برچسب، عنوان متنی هر تب است و باید بهصورت واضح نشان دهد با انتخاب آن چه محتوایی نمایش داده میشود.
- Active Item: آیتم فعال، تبی است که در حال حاضر انتخاب شده و محتوای مرتبط با آن به کاربر نمایش داده میشود.
- Deactive Item: آیتم غیرفعال، تبی است که در حال حاضر انتخاب نشده اما کاربر میتواند برای جابهجایی محتوا آن را انتخاب کند.
- Disable Item: آیتم غیرفعالشده، تبی است که در حال حاضر در دسترس نیست و کاربر امکان انتخاب یا تعامل با آن را ندارد.
- Container: کانتینر، محدودهای است که مجموعه تبها را در بر میگیرد و آنها را بهصورت یک گروه منسجم نمایش میدهد.
ساختار
حالت پیشفرض
| موضوع | مقدار |
|---|---|
| ارتفاع کلی کانتینر | 40px |
| ارتفاع آیتم فعال | 32px |
| سایز آیکون | 24px |
| پدینگ داخلی کانتینر | 4px |
| پدینگ آیتمها | 4px |
| فاصله بین آیتمها | 4px |
| فاصله بین آیکون و برچسب | 4px |
مسطح
| موضوع | مقدار |
|---|---|
| ارتفاع کلی کانتینر | 40px |
| ارتفاع آیتم فعال | 24px |
| سایز آیکون | 24px |
| پدینگ داخلی کانتینر | 2px |
| پدینگ آیتمها | 8px |
| فاصله بین آیتمها | 8px |
| فاصله بین آیکون و برچسب | 4px |
نوشتار
- لیبلهای تب باید کوتاه، مستقیم و قابل فهم باشند.
- لیبلها معمولا تا ۳ کلمه باشند تا کاربران به راحتی منظور هر تب را درک کنند.
- از شکستن متن تب در چند خط پرهیز کنید.
- در صورتی که لازم است، از آیکونهای معنادار برای تقویت مفهوم تب استفاده کنید.
- برچسبها باید همسطح و هموزن باشند (تا کاربر حس دستهبندی منظم داشته باشد).
- درصورت اسفتاده از لیبل، آیکون و یا هردو مورد در تبها، میبایست یکپارچگی و انسجام بین آیتمها در طراحی حفظ شود.
| Do | Don't |
|---|---|
 |  |
آیکون
آیکونها در تبها با سایز ۲۴ پیکسل پیادهسازی شدهاند و بهطور اختیاری میتوانند در کنار لیبل قرار گیرند تا مفهوم هر تب را بهتر و سریعتر به کاربر منتقل کنند. این آیکونها بهویژه در نسخههای موبایل که نیاز به صرفهجویی در فضا وجود دارد، میتوانند بهصورت icon-only استفاده شوند، بهشرطی که مفهوم آیکون بهوضوح برای کاربر قابل درک باشد و نیازی به استفاده از متن نباشد.
مهم است که در هر مجموعه از تبها، حداقل یکی از دو مورد «لیبل» یا «آیکون» فعال باشد. درصورت اسفتاده از لیبل، آیکون و یا هردو مورد در تبها، میبایست یکپارچگی و انسجام بین آیتمها در طراحی حفظ شود. همچنین، برای همه تبها باید از یک سبک یکپارچه برای آیکونها و لیبلها استفاده شود.