چیدمان

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

انواع چیدمان

تنظیمات

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

• از PageHeader با size="default" استفاده کنید
• از PageContainer با size="default" استفاده کنید
• از PageSection برای سازماندهی تنظیمات به گروه‌های منطقی استفاده کنید

<PageContainer size="default">
  <PageHeader size="default">
    <PageHeaderTitle>تنظیمات پروژه</PageHeaderTitle>
    <PageHeaderDescription>
      مدیریت تنظیمات و پیکربندی پروژه
    </PageHeaderDescription>
  </PageHeader>
  
  <PageSection>
    <PageSectionTitle>اطلاعات عمومی</PageSectionTitle>
    {/* محتوای تنظیمات */}
  </PageSection>
</PageContainer>

لیست

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

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

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

• با فیلتر یا جستجو: اگر جدول فیلتر یا جستجو دارد، اقدامات جدول را با فیلترها در سمت راست تراز کنید. از PageSectionAside یا PageHeaderAside برای اقدامات جدول زمانی که فیلترها وجود دارند استفاده نکنید.
• بدون فیلتر: برای لیست‌های ساده بدون فیلتر یا جستجو، اقدامات لیست اصلی را به PageHeaderAside یا PageSectionAside اضافه کنید.

<PageContainer size="large">
  <PageHeader size="large">
    <PageHeaderTitle>جداول پایگاه داده</PageHeaderTitle>
    <PageHeaderAside>
      <Button>جدول جدید</Button>
    </PageHeaderAside>
  </PageHeader>
  
  <PageSection>
    {/* جدول یا لیست */}
  </PageSection>
</PageContainer>

تجربیات داده و صفحه کامل

تجربیات صفحه کامل مانند ویرایشگر جدول، cron job ها، و edge function ها نیاز به حداکثر فضای صفحه دارند و بنابراین از کانتینرهای اندازه "full" استفاده می‌کنند.

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

<PageContainer size="full">
  <PageHeader size="full">
    <PageHeaderTitle>ویرایشگر جدول</PageHeaderTitle>
  </PageHeader>
  
  {/* محتوای صفحه کامل */}
</PageContainer>

صفحات جزئیات

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

• از PageHeader با size="large" استفاده کنید
• از PageContainer با size="large" استفاده کنید
• از PageSection با orientation="horizontal" برای نمایش خلاصه در کنار محتوا استفاده کنید
• چندین بخش می‌توانند به صورت عمودی stack شوند با چیدمان‌های افقی درون هر بخش

<PageContainer size="large">
  <PageHeader size="large">
    <PageHeaderTitle>جزئیات پروژه</PageHeaderTitle>
  </PageHeader>
  
  <PageSection orientation="horizontal">
    <PageSectionMain>
      {/* محتوای اصلی */}
    </PageSectionMain>
    <PageSectionAside>
      {/* خلاصه یا اطلاعات جانبی */}
    </PageSectionAside>
  </PageSection>
</PageContainer>

کامپوننت‌ها

PageContainer

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

<PageContainer size="default" | "large" | "full">
  {/* محتوا */}
</PageContainer>

PageHeader

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

<PageHeader size="default" | "large" | "full">
  <PageHeaderBreadcrumb>
    <Breadcrumb>
      <BreadcrumbItem>خانه</BreadcrumbItem>
      <BreadcrumbItem>پروژه‌ها</BreadcrumbItem>
    </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>

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

1. فاصله‌گذاری یکنواخت: همیشه از کامپوننت‌های صفحه برای فاصله‌گذاری یکنواخت استفاده کنید
2. سلسله مراتب: از اندازه‌های مختلف برای ایجاد سلسله مراتب بصری استفاده کنید
3. واکنش‌گرایی: کامپوننت‌ها به طور خودکار در اندازه‌های مختلف صفحه واکنش‌گرا هستند
4. RTL: همه کامپوننت‌ها از RTL پشتیبانی می‌کنند و از logical properties استفاده می‌کنند