هدر برنامه (SiteHeader)

هدر sticky با شکاف شروع (هویت محصول یا ابزار) و شکاف پایان (جست‌وجو، اعلان‌ها، منوی کاربر) — جزء سازندهٔ نوار بالای ProductFrame؛ عنوان و مسیر صفحه در PageHeader صفحه می‌آیند

برای قاب برنامه منسوخ از 4.0

قاب برنامهٔ همهٔ محصولات ProductFrame است، یک بار در layout ریشه. یک SiteHeader مستقل را برای ساختن قاب برنامه به کار نبرید؛ ProductFrame نوار بالا را خودش با همین جزء می‌سازد، با هویت محصول و actions سراسری.

معرفی

SiteHeader یک هدر sticky با backdrop blur است و ProductFrame نوار بالای خود را با همین جزء می‌سازد. ترکیب‌پذیر با sub-componentها — SiteHeaderStart سمت شروع (هویت محصول یا ابزار)، SiteHeaderEnd سمت پایان (search trigger + notifications + user menu).

چه زمانی استفاده کنیم:

نوار بالای یک ابزار یا صفحهٔ مستقل بیرون از قاب محصول، با دسترسی‌های ثابت (جست‌وجو، اعلان‌ها، منوی کاربر)
ساختن جزء تازه‌ای در خود سیستم طراحی که هدر لازم دارد

چه زمانی استفاده نکنیم:

قاب یک محصول → ProductFrame؛ نوار بالایش را خودش با SiteHeader می‌سازد و اقدام‌های سراسری را در actions می‌گیرد
عنوان و مسیر (breadcrumb) صفحه → PageHeader صفحه (title، breadcrumbs)، تنها <h1> صفحه؛ هدر برنامه عنوان صفحه را نشان نمی‌دهد
در صفحه‌های auth یا onboarding — هدر در اینجا مزاحم است

محتوای صفحه اینجا قرار می‌گیرد

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

زمین بازی

تنظیمات

ظاهر

اندازه

کد این نمونه به‌صورت خودکار قابل تولید نیست — برای کد آماده‌ی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.

استفاده

import {
  SiteHeader,
  SiteHeaderStart,
  SiteHeaderEnd,
  SiteHeaderTitle,
  SiteHeaderSubtitle,
  SiteHeaderTitleGroup,
  SiteHeaderActions,
  SiteHeaderSeparator,
  NotificationCenter,
  UserMenu,
} from '@partodata/ui'

// نوار بالای یک ابزار مستقل: هویت ابزار در شروع، دسترسی‌های ثابت در پایان. عنوان صفحه اینجا نمی‌آید.
;<SiteHeader>
  <SiteHeaderStart>
    <SiteHeaderTitleGroup>
      <SiteHeaderTitle>ابزار گزارش‌گیری</SiteHeaderTitle>
      <SiteHeaderSubtitle>نسخهٔ آزمایشی</SiteHeaderSubtitle>
    </SiteHeaderTitleGroup>
  </SiteHeaderStart>

  <SiteHeaderEnd>
    <SiteHeaderActions>{/* search trigger */}</SiteHeaderActions>
    <SiteHeaderSeparator />
    <NotificationCenter items={notifs} />
    <UserMenu user={user} items={userMenuItems} />
  </SiteHeaderEnd>
</SiteHeader>

نمای ساده

اگر subtitle نیاز ندارید:

Props

Prop

Type

SiteHeaderStart / SiteHeaderEnd

Prop

Type

SiteHeaderTitle / SiteHeaderSubtitle

معمولاً درون SiteHeaderTitleGroup قرار می‌گیرند. هر دو یک‌خطی‌اند و بیش از عرض موجود truncate می‌شوند.

Prop

Type

راهنمای استفاده

بکنید

هویت محصول یا ابزار را در SiteHeaderStart و دسترسی‌های ثابت را در SiteHeaderEnd بگذارید؛ عنوان و breadcrumb صفحه در PageHeader صفحه می‌آیند
action ها را به سه دسته تقسیم کنید: (1) جستجو/پالت (2) notifications (3) user menu — با SiteHeaderSeparator بین هر دسته فاصله‌ی بصری بگذارید
برای دکمه‌ی جستجو از pattern «input-mimicking button + kbd hint» استفاده کنید تا کاربر حتی بدون Ctrl+K بداند جستجو در دسترس است
هدر را با useHotkeys('mod+k') به پالت متصل کنید تا کاربران حرفه‌ای از کی‌بورد استفاده کنند

نکنید

عنوان یا breadcrumb صفحه را در هدر نگذارید — جای آن‌ها PageHeader صفحه است و هر صفحه یک <h1> دارد (SiteHeaderTitle به‌طور پیش‌فرض h1 است؛ فقط در ابزاری که PageHeader ندارد)
قاب محصول را با SiteHeader دستی نسازید؛ ProductFrame آن را می‌سازد
بیش از 3 icon-button اکشن کنار هم قرار ندهید — سایرین را درون overflow menu ببرید
از backdrop-blur هدر برای پس‌زمینه‌ی کاملاً شفاف استفاده نکنید — روی تم تیره contrast کم می‌شود