CSS: page-layout ​

div[class~="instui-page-layout"] — طرح صفحهٔ سه‌ستونهٔ استاندارد با هدر، سایدبار و محتوای اصلی.

✅ از Page-Layout استفاده کنید وقتی:

  • به ساختار صفحهٔ کلاسیک با مناطق ناوبری و محتوا نیاز دارید

  • صفحه دارای ناحیهٔ محتوای اصلی واضح است که در دو طرف آن نواحی تکمیلی قرار دارند

  • می‌خواهید فاصله‌ها و ترازبندی در سراسر طرح ثابت باشد 🚫 از Page-Layout استفاده نکنید وقتی:

  • ساخت صفحهٔ تک‌ستونه — به‌جای آن از طرح ساده‌تری استفاده کنید

  • سایدبار با محتوای اصلی برای اهمیت رقابت می‌کند

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

  • ناحیهٔ محتوای اصلی را به یک نشانه‌گاه <main> نگاشت کنید
  • به سایدبار role="navigation" یا role="complementary" را در صورت لزوم اختصاص دهید
  • اطمینان حاصل کنید که نواحی نشانه‌گاه aria-labelهای متمایز دارند

نحوه استفاده ​

css
@import "@pantoken/plugin-layouts/layouts.css";

قسمت‌ها ​

قسمتتوضیحات
.instui-bodyبدنهٔ اصلی که سایدبار و محتوا را در خود دارد.
.instui-footerناحیهٔ فوتر پایین.
.instui-headerناحیهٔ هدر بالا.
.instui-mainناحیهٔ محتوای مرکزی.
.instui-sidebarستون ناوبری یا کمکی سمت چپ.

حالت‌ها ​

وضعیتتوضیحات
:optional—

توکن‌های مصرف‌شده ​

Tokenنوعمقدار
--instui-color-border——
--instui-color-footer-background——
--instui-color-footer-text——
--instui-color-header-background——
--instui-color-sidebar-background——
--instui-font-size-small<length>—
--instui-space-medium——

مرتبط ​