معرفی

کامپوننت PageHeader یک سربرگ یکپارچه برای صفحات داخلی است. شامل عنوان، توضیح اختیاری، دکمه بازگشت، breadcrumb، و ناحیه عملیات در انتهای ردیف می‌شود.

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

• در بالای هر صفحه داخلی برای نمایش عنوان و اقدامات مرتبط
• وقتی نیاز به دکمه بازگشت یا breadcrumb دارید
• برای ایجاد ساختار یکپارچه در تمام صفحات داشبورد

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

• داخل modal یا dialog — header در overlay ها معمولاً ساده‌تر است
• برای section header های داخل صفحه — از h2 ساده استفاده کنید

زمین بازی

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

استفاده

import { PageHeader, Button } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <PageHeader
      title="گزارش تعامل اینستاگرام"
      description="تحلیل نرخ تعامل در بازه زمانی انتخاب‌شده"
      onBack={() => history.back()}
      actions={
        <>
          <Button variant="outline" size="sm">
            صادر کردن
          </Button>
          <Button size="sm">به‌روزرسانی</Button>
        </>
      }
    />
  )
}

حالت‌ها و انواع

با Breadcrumb

Props

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

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

• دکمه برگشت دارای aria-label است که از locale سیستم خوانده می‌شود
• عنوان صفحه با تگ <h1> رندر می‌شود که برای ساختار صفحه مهم است

کامپوننت‌های مرتبط

• Breadcrumb — اغلب در کنار PageHeader استفاده می‌شود تا مسیر ناوبری کاربر مشخص باشد
• AppBar — وقتی به هدر سطح اپلیکیشن (sticky) نیاز دارید، نه هدر سطح صفحه