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

هدر یکپارچه‌ی App Shell با breadcrumb، عنوان، و شکاف‌های action، notification، و user menu

معرفی

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

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

در صفحه‌های داشبوردی چندبخشی (افکارسنجی، پیج‌ها، عملیات) برای نمایش context صفحه‌ی جاری + دسترسی‌های ثابت
در کنار Sidebar و CommandPalette و NotificationCenter — این یک‌جا همه‌ی triggerها را کنار هم قرار می‌دهد

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

در سایت‌های تک‌صفحه‌ای یا marketing — از AppBar (primitive سبک‌تر) استفاده کنید
وقتی breadcrumb و title لازم نیست و فقط نوار logo+nav می‌خواهید — از AppBar استفاده کنید
در صفحه‌های auth یا onboarding — هدر در اینجا مزاحم است

خوشه «رونمایی محصول جدید»

آخرین به‌روزرسانی: ۳ دقیقه پیش

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

زمین بازی

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

زمین بازی

داشبورد افکارسنجی

تنظیمات

ظاهر

اندازه

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

استفاده

import {
  SiteHeader,
  SiteHeaderStart,
  SiteHeaderEnd,
  SiteHeaderTitle,
  SiteHeaderSubtitle,
  SiteHeaderTitleGroup,
  SiteHeaderActions,
  SiteHeaderSeparator,
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  NotificationCenter,
  UserMenu,
} from '@parto-system-design/ui'
;<SiteHeader>
  <SiteHeaderStart>
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">افکارسنجی</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>خوشه‌ها</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
    <SiteHeaderTitleGroup>
      <SiteHeaderTitle>خوشه‌ی فعلی</SiteHeaderTitle>
      <SiteHeaderSubtitle>آخرین به‌روزرسانی: ۳ دقیقه پیش</SiteHeaderSubtitle>
    </SiteHeaderTitleGroup>
  </SiteHeaderStart>

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

نمای ساده

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

داشبورد

Props

Prop

Type

SiteHeaderStart / SiteHeaderEnd

Prop

Type

SiteHeaderTitle / SiteHeaderSubtitle

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

Prop

Type

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

بکنید

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

نکنید

title را بیش از ۴-۵ کلمه نکنید — برای متن طولانی‌تر از PageHeader داخل body صفحه استفاده کنید - بیش از ۳ icon-button اکشن کنار هم قرار ندهید — سایرین را درون overflow menu ببرید - هدر را پایین breadcrumb مستقل نگذارید — در App Shell، breadcrumb جزء هدر است نه صفحه - از backdrop-blur هدر برای پس‌زمینه‌ی کاملاً شفاف استفاده نکنید — روی تم تیره contrast کم می‌شود

دسترسی‌پذیری

element اصلی <header> سمانتیک است — landmark banner را assistive tech تشخیص می‌دهد
breadcrumb خودش با aria-label="مسیر" mark می‌شود (از کامپوننت Breadcrumb)
action ها اگر فقط آیکون‌اند باید aria-label صریح داشته باشند