تم تاریک
سابهدر Sub Header
کامپوننت Sub Header یک نوار ساختاری ثانویه است که بلافاصله زیر هدر اصلی (Main Header) قرار میگیرد. این کامپوننت برای تثبیت کانتکس، ارائه راهنمایی، نمایش اکشنهای اصلی صفحه و اعمال فیلترهای سطح بالا استفاده میشود تا کاربر همواره موقعیت خود را در سامانه تشخیص دهد.
نمونه زنده
آناتومی
سابهدر بر اساس پیچیدگی محتوا از ۳ بخش اصلی (چپ، مرکز، راست) تشکیل شده است:
( نمایش آناتومی Sub Header شامل مسیر صفحه، عنوان در سمت راست و دکمههای اکشن اصلی در سمت چپ)
- بخش راست (Leading Content): عنوان اصلی صفحه (Title)، دکمه بازگشت (Back Button) و سویچهای سطح بالا در صفحه
- بخش چپ (Actions): محل قرارگیری اکشنهای اصلی صفحه (مثل دکمه "ایجاد ریسورس جدید"، "خروجی گرفتن" یا منوی اکشنهای بیشتر).
فواصل
برای حفظ تعادل بصری در لیوتذهای مختلف، ابعاد زیر استانداردسازی شدهاند:
(نمایش فنی سابهدر همراه با جزئیات ارتفاع، پدینگهای افقی، گپ بین المانها و استایل بردر سفلی به پیکسل)
۲.۱ ابعاد و ارتفاع (Height & Padding)
- ارتفاع استاندارد (Default Height): برابر با
56px(متناسب با چیدمان صفحه).
۲.۲ چسبندگی و موقعیت (Sticky Behavior)
سابهدر میتواند به صورت Sticky در بالای صفحه (زیر هدر اصلی) قفل شود تا هنگام اسکرول طولانی، اکشنها و عنوان صفحه همواره در دسترس کاربر باقی بمانند.
راهنمای استفاده
بایدها
- یکپارچگی اکشن اصلی: دکمه اکشن primary (اصلیترین کاری که کاربر در این صفحه انجام میدهد) را همیشه در منتهیالیه سمت چپ (در RTL) سابهدر قرار دهید. این دکمه در حالت
Primaryو با رنگ$bg-primary-t3-1-defaultاستفاده میشود. - شفاف بودن عنوان: عنوان صفحه در سابهدر باید کوتاه و کاملاً شفاف باشد (حداکثر ۲ تا ۳ کلمه).
- در اسلاتها، از کامپوننتها و آیتمهای پیچیده استفاده نکنید.
نبایدها
- از قرار دادن تعداد زیادی دکمه در بخش اکشنها خودداری کنید (حداکثر ۲ دکمه اصلی؛ مابقی اکشنها باید داخل منوی Dropdown سه نقطه
...جمع شوند). - سابهدر را با فیلدهای ورودی متعدد شلوغ نکنید؛ فیلترهای پیچیده باید به داخل Toolbar یا سایدپنل فیلتر منتقل شوند.
بهتر است
- در اسلات فیلتر (سمت راست در RTL) از فیلترهای کشویی
Selectاستفاده کنید. - در اسلات اکشنها(سمت چپ در RTL) از اکشنهایی مثل دکمه، دکمه منویی و یا دکمه لینک دار استفاده کنید.