CSS: drawer-layout.content ​

.content — ट्रे के बगल में शेष स्थान भरने वाला प्राथमिक सामग्री पैनल।

जब पैरेंट की inline-size 46em (16em ट्रे चौड़ाई + 30em ब्रेकपॉइंट) से नीचे गिरती है, तो पैरेंट के pantoken-drawer-layout कंटेनर पर किया गया एक @container क्वेरी अपने आप इस सदस्य की min-inline-size को 0 पर घटा देता है, जो मैनुअल [should-overlay-tray] ओवरराइड से मेल खाता है।

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

role="region" रखें (InstUI के DrawerLayout कन्वेंशन के अनुसार) और जब केवल संदर्भ से पहचान संभव न हो तो इसे aria-label/aria-labelledby के नाम से नामित करें।

उपयोग ​

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

उदाहरण ​

html
<div class="instui-drawer-layout">
  <div class="content" role="region">
    <p class="instui-text">Tray content</p>
  </div>
</div>

संरचना ​

text
@scope (@component drawer-layout)
  .content
    ‹content›
flowchart TD subgraph sg0 ["@scope (@component drawer-layout)"] n1(".content"):::cssdoc-part n2[/"‹content›"/]:::cssdoc-slot end n1 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

शर्तें ​

प्रकारक्वेरीविवरण
containerpantoken-drawer-layout (max-width: 46em)—

उपयोग किये गए टोकन ​

Tokenप्रकारमान
--drawer-layout-content-min-inline-size<length>—
--pantoken-bp-md<length>30em

संबंधित ​