لوگوی توپُر دیزاین سیستم سنّت

نوار تب

نوار تب برای طبقه‌بندی و گروه‌بندی محتوا و دسته‌ای از اطلاعات مشابه در صفحه‌ها و نماهای مختلف استفاده می‌شود. نوار تب برای راهبری سریع کاربر بین محتوا شامل دو یا چند تب می‌شود، محتوای مربوط به هر تب را با انتخاب کردن آن تب می‌توان جداگانه دید.

دموی تعاملی

پیش‌نمایش کامپوننت که انواع آن‌ها و تفاوت‌های نمایشی و تعاملی هر کدام را نشان می‌دهد.

گزینه‌ها

کاربرد

تب‌ها با طبقه‌بندی اطلاعات، کاربر را بین دسته‌هایی از محتواهای مرتبط و هم‌سطح راهبری می‌کنند.

مجموعهٔ تب‌‌ها

نوار تب اسکرول‌شدنی

محوکننده با فلش

نوار تب با عرض کامل

تب آیکون (تب بدون متن)

نشان‌گر (Indicator) تب فعال

لیبل متنی

تب آیکون‌دار

آناتومی

اینجا می‌توانید ابعاد تب‌های درون نوار تب، فاصله‌ها، حاشیه‌ها و اندازهٔ متن و آیکون آن‌ها را در حالت‌های بدون معمولی، آیکون‌دار و تب ‌آیکون، در دو مقیاس متفاوت، ببینید.
تب
تب کوچک
تب آیکون‌دار
تب کوچک آیکون‌دار
تب آیکون (تب بدون متن)

رفتار

در راهنمای زیر رفتار کامپوننت در کاربردهای مختلف دیزاین توضیح داده شده است.
درست

لیبل‌ هر تب می‌تواند متن و آیکون داشته باشد. برای لیبل‌‌های متنی باید از عبارات کوتاه استفاده شود.

درست

در صفحه‌نمایش موبایل و دسکتاپ تب اول را با کمی فاصله (حاشیه) از سمت راست قراردهید تا کاربر از اسکرولی‌بودن نوار تب آگاه شود.

درست

کاربران با ضربه‌زدن یا کلیک‌کردن روی یک تب، بین تب‌های مختلف جابه‌جا می‌شوند.

نادرست

از تب برای مقایسهٔ ویژگی‌های محتوا استفاده نکنید.

نادرست

تب‌های نوار تب به سه شکل «متنی (بدون آیکون)»، «آیکون‌دار» و «تب ‌آیکون (بدون متن)» استفاده می‌شوند. همهٔ تب‌های نوار تب باید از یک نوع باشند.

نادرست

از فاصله‌های (padding) نابرابر بین تب‌ها استفاده نکنید.

نادرست

برای بیشتر از ۴ تب از نوار تب با عرض کامل استفاده نکنید.

نادرست

در صفحاتی که از نوار تب استفاده کرده‌اید، پایین آن از چیدمان و ظاهر مشابه با این کامپوننت استفاده نکنید تا کاربر تب را جزئی از محتوا تشخیص ندهد.

نادرست

اگر متن لیبل طولانی شد، سایز آن را کوچک‌تر نکنید و به جای آن از نوار تب اسکرول‌شدنی و یا تب‌های متراکم استفاده کنید تا متن لیبل درست نمایش داده شود.

نادرست

تب‌های نوار تب فقط در یک ردیف کنار هم چیده می‌شوند و به ردیف‌های بیشتر شکسته نمی‌شوند.

نادرست

تا حد امکان از بریده‌شدن متن لیبل جلوگیری کنید. زیرا متن بریده‌شده درک کاربر از مفهوم لیبل را مخدوش می‌کند.

نگارش

- وقتی از نوار تب با عرض کامل استفاده می‌کنید از نمایش درست محتوای تب‌ها در سایز موبایل مطمئن شوید.