CSS: page-layout ​

div[class~="instui-page-layout"] — हेडर, साइडबार और मुख्य सामग्री के साथ मानक तीन-स्तंभ पृष्ठ लेआउट।

✅ Page-Layout का उपयोग करें जब:

  • आपको नेविगेशन और सामग्री क्षेत्रों के साथ क्लासिक पृष्ठ संरचना चाहिए

  • पृष्ठ में एक स्पष्ट मुख्य सामग्री क्षेत्र हो जो पूरक क्षेत्रों से घिरा हो

  • आप लेआउट भर में सुसंगत अंतर और संरेखन चाहते हैं 🚫 Page-Layout का उपयोग न करें जब:

  • एकल-स्तंभ पृष्ठ बना रहे हों — इसके बजाय सरल लेआउट का उपयोग करें

  • साइडबार मुख्य सामग्री के महत्व के साथ प्रतिस्पर्धा करता हो

एक्सेसिबिलिटी ​

  • मुख्य सामग्री क्षेत्र को <main> लैंडमार्क के रूप में मैप करें
  • साइडबार को उपयुक्त रूप से role="navigation" या role="complementary" दें
  • सुनिश्चित करें कि लैंडमार्क क्षेत्रों के अलग aria-labels हों

उपयोग ​

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

संबंधित ​