چیدمان
الگوهای چیدمان صفحات در پرتو — 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 | داشبورد، ویرایشگرهای صفحه کامل |
PageHeader
کامپوننت ترکیبی برای ساخت هدر صفحه با 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 هستند
- واکنشگرایی: کامپوننتها در اندازههای مختلف صفحه به درستی رفتار میکنند