پرتوپرتو

چیدمان

الگوهای چیدمان صفحات در پرتو — PageContainer، PageHeader، و PageSection

الگوی صفحه از سه کامپوننت اصلی تشکیل شده است که با هم کار می‌کنند تا چیدمان‌های یکنواخت ایجاد کنند: PageContainer، PageHeader، و PageSection. این کامپوننت‌ها رویکردی ساختاریافته برای ساخت صفحات با فاصله‌گذاری یکنواخت، عرض‌های حداکثر، و سازماندهی محتوا ارائه می‌دهند.


نمونه بصری

کارت‌های اطلاعاتی — صفحه تحلیل

خلاصه کمپین

داده‌های ۳۰ روز گذشته

بهترین محتوا

۵ پست برتر دوره

آکاردئون — FAQ


انواع چیدمان

تنظیمات

صفحات تنظیمات برای مدیریت پیکربندی پروفایل و ترجیحات استفاده می‌شوند. از چیدمان تک‌ستونی با عرض پیش‌فرض استفاده می‌کنند تا محتوا متمرکز و خوانا بماند. مثال‌ها: تنظیمات حساب، تنظیمات اعلان‌ها.

  • از PageHeader با size="default" استفاده کنید
  • از PageContainer با size="default" استفاده کنید
  • از PageSection برای تقسیم تنظیمات به گروه‌های منطقی استفاده کنید
<PageContainer size="default">
  <PageHeader size="default">
    <PageHeaderTitle>تنظیمات حساب</PageHeaderTitle>
    <PageHeaderDescription>
      اطلاعات پروفایل و تنظیمات امنیتی
    </PageHeaderDescription>
  </PageHeader>

  <PageSection>
    <PageSectionTitle>اطلاعات پروفایل</PageSectionTitle>
    {/* فرم تنظیمات */}
  </PageSection>
</PageContainer>

لیست

صفحات لیست مجموعه‌ای از آیتم‌ها مانند اینفلوئنسرها، کمپین‌ها، یا گزارش‌ها را نمایش می‌دهند. از عرض بزرگ‌تر برای جای دادن جداول داده استفاده می‌کنند.

  • از PageHeader با size="large" استفاده کنید
  • از PageContainer با size="large" استفاده کنید
  • از PageSection برای wrap کردن محتوای لیست استفاده کنید

اقدامات جدول و لیست:

  • با فیلتر یا جستجو: اقدامات را با فیلترها در یک ردیف تراز کنید. از PageHeaderAside برای اقدامات اصلی استفاده نکنید.
  • بدون فیلتر: اقدامات اصلی را به PageHeaderAside یا PageSectionAside اضافه کنید.
<PageContainer size="large">
  <PageHeader size="large">
    <PageHeaderTitle>اینفلوئنسرها</PageHeaderTitle>
    <PageHeaderAside>
      <Button>اینفلوئنسر جدید</Button>
    </PageHeaderAside>
  </PageHeader>

  <PageSection>
    {/* جدول یا گرید اینفلوئنسرها */}
  </PageSection>
</PageContainer>

داشبورد (صفحه کامل)

داشبورد سوشال لیسنینگ و صفحات تحلیل نیاز به حداکثر فضا دارند تا نمودارها و داده‌ها بهتر نمایش داده شوند. از size="full" استفاده کنید.

  • از PageHeader با size="full" استفاده کنید
  • از PageContainer با size="full" استفاده کنید
  • محتوا عرض کامل viewport را پوشش می‌دهد
<PageContainer size="full">
  <PageHeader size="full">
    <PageHeaderTitle>داشبورد سوشال لیسنینگ</PageHeaderTitle>
    <PageHeaderAside>
      <PeriodSelector />
    </PageHeaderAside>
  </PageHeader>

  {/* نمودارها و متریک‌ها */}
</PageContainer>

صفحات جزئیات

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

  • از PageHeader با size="large" استفاده کنید
  • از PageSection با orientation="horizontal" استفاده کنید
<PageContainer size="large">
  <PageHeader size="large">
    <PageHeaderBreadcrumb>
      <Breadcrumb>
        <BreadcrumbItem>
          <BreadcrumbLink href="/influencers">اینفلوئنسرها</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbPage>علی احمدی</BreadcrumbPage>
        </BreadcrumbItem>
      </Breadcrumb>
    </PageHeaderBreadcrumb>
    <PageHeaderTitle>پروفایل اینفلوئنسر</PageHeaderTitle>
  </PageHeader>

  <PageSection orientation="horizontal">
    <PageSectionMain>
      {/* محتوای اصلی — نمودارها و آمار */}
    </PageSectionMain>
    <PageSectionAside>
      {/* کارت خلاصه اینفلوئنسر */}
    </PageSectionAside>
  </PageSection>
</PageContainer>

کامپوننت‌ها

PageContainer

کانتینر اصلی که عرض حداکثر و padding یکنواخت بر اساس variant اندازه ارائه می‌دهد.

<PageContainer size="default" | "large" | "full">
  {/* محتوا */}
</PageContainer>
sizeکاربرد
defaultصفحات تنظیمات و فرم‌ها
largeلیست‌ها، جداول، جزئیات
fullداشبورد، ویرایشگرهای صفحه کامل

کامپوننت ترکیبی برای ساخت هدر صفحه با breadcrumb، عنوان، توضیحات، و اقدامات.

<PageHeader size="default" | "large" | "full">
  <PageHeaderBreadcrumb>
    <Breadcrumb>...</Breadcrumb>
  </PageHeaderBreadcrumb>

  <PageHeaderTitle>عنوان صفحه</PageHeaderTitle>
  <PageHeaderDescription>توضیحات صفحه</PageHeaderDescription>

  <PageHeaderAside>
    <Button>اقدام اصلی</Button>
  </PageHeaderAside>
</PageHeader>

PageSection

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

<PageSection orientation="vertical" | "horizontal">
  <PageSectionTitle>عنوان بخش</PageSectionTitle>
  <PageSectionDescription>توضیحات بخش</PageSectionDescription>

  <PageSectionMain>
    {/* محتوای اصلی */}
  </PageSectionMain>

  <PageSectionAside>
    {/* محتوای جانبی */}
  </PageSectionAside>
</PageSection>

بهترین روش‌ها

  • یکنواختی: همیشه از کامپوننت‌های صفحه استفاده کنید — فاصله‌گذاری دستی نداشته باشید
  • سلسله‌مراتب: اندازه PageContainer و PageHeader باید با هم مطابقت داشته باشند
  • RTL: همه کامپوننت‌ها از CSS Logical Properties استفاده می‌کنند و به صورت خودکار RTL-compatible هستند
  • واکنش‌گرایی: کامپوننت‌ها در اندازه‌های مختلف صفحه به درستی رفتار می‌کنند