CSS: page-layout ​

div[class~="instui-page-layout"] — เลย์เอาต์หน้ามาตรฐาน 3 คอลัมน์ พร้อมส่วนหัว แถบด้านข้าง และเนื้อหาหลัก.

✅ ใช้ 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——

ที่เกี่ยวข้อง ​