CSS: drawer-layout ​

.instui-drawer-layout — एक विभाजित लेआउट जिसमें एक संकुचित‑योग्य साइड ट्रे और प्राथमिक स्क्रॉल करने योग्य सामग्री पैन है।

-placement-end और डिफ़ॉल्ट (start) दोनों flex-direction/inset-inline-* लॉजिकल प्रॉपर्टीज़ का उपयोग करते हैं, न कि left/right का, इसलिए ट्रे की साइड स्वतः ही direction/dir="rtl" का पालन करती है — अलग RTL नियमों की आवश्यकता नहीं है।

Source: drawer-layout.css

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

जब ट्रे नेविगेशन के रूप में कार्य करती है, तो इसे एक एक्सेसिबल हैडिंग या aria-label से लेबल करें। .content को role="region" दें (InstUI का DrawerLayout कन्वेंशन) और जब केवल संदर्भ से पहचान न हो तो इसे aria-label/aria-labelledby से नामित करें।

उपयोग ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/drawer-layout.css";

उदाहरण ​

html
<div class="instui-drawer-layout" id="drawer" open>
  <aside class="tray">Navigation</aside>
  <main class="content" role="region">Main content</main>
</div>

संरचना ​

text
.instui-drawer-layout
  drawer-layout.tray (component)
  drawer-layout.content (component)
flowchart TD n0[".instui-drawer-layout"]:::cssdoc-root n1(["drawer-layout.tray"]):::cssdoc-component n2(["drawer-layout.content"]):::cssdoc-component n0 --> n1 n0 --> n2 click n1 "/api/css/drawer-layout.tray.md" click n2 "/api/css/drawer-layout.content.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

मॉडिफायर ​

मॉडिफायरविवरण
.-openजब open एट्रिब्यूट अनुपस्थित हो तब भी ट्रे दिखाएँ।
.-placement-endट्रे को इनलाइन‑एंड साइड पर डॉक करें।
.-placement-startट्रे को इनलाइन‑स्टार्ट साइड पर डॉक करें (डिफ़ॉल्ट; इसे स्पष्ट रूप से सेट करता है)।
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

पार्ट्स ​

भागविवरण
.contentमुख्य पैन।
.trayसाइड पैनल।

कस्टम प्रॉपर्टीज ​

प्रॉपर्टीप्रकारडिफ़ॉल्टविवरण
--pantoken-bp-md——ओवरले मोड के लिए चौड़ाई थ्रेशहोल्ड (30em, रेस्पॉन्सिव यूटिलिटीज़ के माध्यम से थीम्ड)।

ब्राउज़र समर्थन ​

  • drawer-layout.tray/drawer-layout.content सदस्य एक @container क्वेरी के माध्यम से स्वचालित रूप से ओवरले मोड में बदल जाते हैं जब इस एलिमेंट का इनलाइन‑साइज़ ट्रे‑चौड़ाई + --pantoken-bp-md से नीचे गिरता है। @pantoken/interactions व्यवहार अतिरिक्त रूप से [should-overlay-tray]/.-should-overlay-tray (एक मैनुअल ओवरराइड) को टॉगल करता है और उन ऐप्स के लिए overlaytraychange इमिट करता है जिन्हें यह बदलाव एक इवेंट के रूप में चाहिए।

सबकम्पोनेन्ट्स ​

संबंधित ​

  • tray — एक स्वतंत्र किनारी ओवरले; यह लेआउट ट्रे और सामग्री को एक ही फ्लो में रखता है。
  • context-view — संदर्भगत क्रियाओं और विवरण के लिए एक छोटा एंकर किया गया सतह।