نوار تب
نوار تب برای طبقه‌بندی و گروه‌بندی محتوا و دسته‌ای از اطلاعات مشابه در صفحه‌ها و نماهای مختلف استفاده می‌شود. نوار تب برای راهبری سریع کاربر بین محتوا شامل دو یا چند تب می‌شود، محتوای مربوط به هر تب را با انتخاب کردن آن تب می‌توان جداگانه دید.
دموی تعاملی
کاربرد
تبها با طبقه‌بندی اطلاعات، کاربر را بین دسته‌هایی از محتواهای مرتبط و هم‌سطح راهبری می‌کنند.
مجموعهٔ تبها
محتوای هر تب باید از بقیهٔ تب‌های مجموعه مجزا باشد و هر تب دسته‌ای از اطلاعات مرتبط را معرفی کند. مثلاً برای نمایش دسته‌بندی‌های آگهی مانند املاک، وسایل نقلیه، لوازم الکترونیکی و ... می‌توان از نوار تب استفاده کرد.
نوار تب اسکرول‌شدنی
افقی اسکرول می‌شود و عرض آن به نگه‌دارندهٔ والد (Parent Container) وابسته (Relative) است. به همین دلیل رابط کاربر براساس نیازِ محصول می‌تواند تعداد نامحدودی تب داشته باشد. اگر تبها زیاد باشند یا عرض نگه‌دارنده کم باشد، بعضی از تبها در عرض نگه‌دارندهٔ والد جا نمی‌شوند. در این حالت عرض تبها کم و فشرده و یا بخشی از تب یا کل تب مخفی (Hide) می‌شود. محوکننده (Fader) مخفی‌شدنِ تب را در نوار تب اسکرول‌شدنی میسر می‌کند تا کاربر از اسکرولی‌بودن نوار تب آگاه شود. تب‌های نوار تب اسکرول‌شدنی می‌توانند لیبلهای عریض‌تری داشته باشند که هیچگاه بریده یا خلاصه نمی‌شوند. استفادهٔ آن‌ها در دستگاه‌هایی با رابط لمسی یکی از مفیدترین کاربردهای نوار تب اسکرول‌شدنی است.
محوکننده با فلش
این محوکننده‌ها با گرادیان سفیدی که دو فلش در سمت چپ و راست نوار تب دارد، کاربر را از اسکرولی‌بودن آن آگاه می‌کنند.
نوار تب با عرض کامل
در نوار تب با عرض کامل همهٔ تبها در یک نما نشان داده می‌شوند. عرض تبها ثابت است و هیچ تبی مخفی نمی‌شود. همچنین عرض نوار تب وابسته به نگه‌دارندهٔ والد است.
تب‌های این کامپوننت در حالت معمولی به وسط چین و یا راست‌چین (در چیدمان زبان فارسی) هم‌ترازند، و در حالت سیال (Fluid) در عرض نوار تب گسترده می‌شوند.
تب آیکون (تب بدون متن)
برای استفاده از تب آیکون (تب بدون متن) در نوار تب این ۳ شرط لازم است:
- فضای استفاده از تب محدود باشد.
- دسترسی‌پذیری آیکون‌ها (pictogram) بررسی و تأیید شده باشد.
- کاربر مفهوم آیکون را در محصول متوجه شود.
نشانگر (Indicator) تب فعال
برای تمایز میان تب فعال و غیرفعال از نشانگر خطی با رنگ برند استفاده می‌کنیم که زیر تب فعال قرار می‌گیرد. همچنین لیبل متنی و آیکون تب فعال نیز با رنگ برند از تب‌های غیرفعال متمایز می‌شوند.
لیبل متنی
لیبل متنی باید خلاصه و واضح محتوایی را که نشان می‌دهد، توصیف کند. محتوای تب باید مجموعه‌ای منسجم از داده‌هایی با ویژگی‌های مشترک باشد.
متن لیبل تب نباید هیچگاه ۲ خط شود. پیشنهاد می‌کنیم برای لیبل‌هایی با متن طولانی، از نوار تب با اسکرول افقی استفاده کنید تا متن لیبل به‌راحتی خوانده شود.
تب آیکون‌دار
تبها برای ایجاد ارتباط بهتر با محتوا می‌توانند آیکون داشته باشند. آیکون‌ها نوع محتوای تب را ساده و مشخص به کاربر منتقل می‌کنند، اگرچه به اندازهٔ لیبلهای متنی در انتقال محتواهای پیچیده موثر نیستند.
تبها می‌توانند ترکیبی از آیکون و متن (تب آیکون‌دار) باشند.
آناتومی
اینجا می‌توانید ابعاد تب‌های درون نوار تب، فاصله‌ها، حاشیه‌ها و اندازهٔ متن و آیکون آن‌ها را در حالت‌های مختلف ببینید.
رفتار
در راهنمای زیر رفتار کامپوننت در کاربردهای مختلف دیزاین توضیح داده شده است.
نگارش
- وقتی از نوار تب با عرض کامل استفاده می‌کنید از نمایش درست محتوای تبها در سایز موبایل مطمئن شوید.