CSS: drawer-layout.tray ​

.tray — मुख्य सामग्री के बगल में साइड पैनल, वैकल्पिक ओवरले और ट्रे-सदृश सतह मॉडिफायर्स के साथ।

स्थिति निर्धारण में inset-inline-start/inset-inline का उपयोग होता है (कभी भी left/right नहीं), इसलिए -placement-end LTR और RTL दोनों में वास्तविक अंतिम किनारे पर डॉक्स होता है।

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

यदि नेविगेशन के रूप में उपयोग किया जा रहा है, तो लिंक को एक सैमांटिक <nav> में रैप करें और एक पहुँच योग्य नाम प्रदान करें।

उपयोग ​

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

उदाहरण ​

html
<div class="instui-drawer-layout" open>
  <aside class="tray" aria-label="Course navigation">
    <a class="instui-link" href="#">मॉड्यूल</a>
  </aside>
  <main class="content" role="region">मुख्य सामग्री</main>
</div>

संरचना ​

text
@scope (@component drawer-layout)
  .tray
    ‹content›
flowchart TD subgraph sg0 ["@scope (@component drawer-layout)"] n1(".tray"):::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;

मॉडिफायर ​

मॉडिफायरविवरण
.-placement-endओवरले मोड सक्रिय होने पर इस ट्रे को inline-end पर डॉकर करें।
.-without-borderपैनल के किनारे का बॉर्डर हटाएँ।
.-without-shadowओवरले मोड सक्रिय होने पर एलेवेशन हटाएँ।

शर्तें ​

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

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

Tokenप्रकारमान
--drawer-layout-tray-width——
--instui-border-width-sm<length>0.0625rem
--instui-color-background-elevated-surface-base<color>LightDarklight-dark(#ffffff, #171B21)
--instui-color-stroke-base<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-component-tray-width-xs<length>16em
--instui-component-tray-z-index<integer>9999
--instui-elevation-topmostnone | <shadow>#—

संबंधित ​

  • drawer-layout.content — इस सदस्य के साथ-साथ फ्लेक्स होने वाला प्राथमिक पेन।