CSS: page-layout

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

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

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

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

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

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

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

سهولة الوصول

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

الاستخدام

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

ذات صلة

• wrapper