CSS: page-layout ​

div[class~="instui-page-layout"] — تخطيط صفحة قياسي بثلاثة أعمدة مع رأس الصفحة، الشريط الجانبي، والمحتوى الرئيسي.

✅ استخدم Page-Layout عندما:

  • تحتاج إلى هيكل صفحة كلاسيكي يحتوي على مناطق للتنقل والمحتوى

  • تحتوي الصفحة على منطقة محتوى رئيسية واضحة محاطة بمناطق تكميلية

  • تريد تباعدًا ومحاذاة متسقة عبر التخطيط 🚫 لا تستخدم Page-Layout عندما:

  • تبني صفحة ذات عمود واحد — استخدم تخطيطًا أبسط بدلًا من ذلك

  • يتنافس الشريط الجانبي مع المحتوى الرئيسي على الأهمية

Accessibility ​

  • اربط منطقة المحتوى الرئيسي بالمعلم <main>
  • امنح الشريط الجانبي role="navigation" أو role="complementary" حسب الاقتضاء
  • تأكد من أن للمناطق المميزة تسميات aria مميزة

Usage ​

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

Parts ​

PartDescription
.instui-bodyالجسم الرئيسي الذي يحتوي على الشريط الجانبي والمحتوى.
.instui-footerمنطقة التذييل السفلية.
.instui-headerمنطقة الرأس العلوية.
.instui-mainمنطقة المحتوى المركزية.
.instui-sidebarعمود التنقل الأيسر أو العمود المساعد.

States ​

StateDescription
:optional—

Tokens consumed ​

TokenTypeValue
--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——