CSS: tray

.instui-tray — एक किनारे-पिन किया गया पैनल जो किसी भी ओर से स्लाइड होकर आता है; एक नेटिव [popover] या <dialog>।

शुरू/समाप्त प्लेसमेंट inset-inline के सापेक्ष हल होते हैं (लॉजिक-आधारित, दिशा-संवेदनशील); स्लाइड-इन ट्रांसफ़ॉर्म स्वचालित रूप से किसी पूर्वज [dir="rtl"] के अंतर्गत मिरर हो जाता है, इसलिए दाएं-से-बाएं लेआउट के लिए अतिरिक्त मार्कअप की आवश्यकता नहीं होती।

Source: tray.css

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

ट्रे एक डायलक्ट या पोपोवर सतह है, इसलिए इसे aria-label या aria-labelledby से नाम दें, और उसका बंद करने का नियंत्रण aria-label रखता है (उदाहरण में .instui-close-button aria-label="Close" का उपयोग करता है)।

उपयोग

@import "@pantoken/components/components.css";
@import "@pantoken/components/tray.css";

उदाहरण

<div class="instui-tray -placement-end -size-sm">
  <span class="instui-heading -level-h3">Filters</span>
  <p class="-size-sm">A tray slides in from the start edge and fills the viewport height.</p>
</div>
<button class="instui-button -toggle">toggle tray</button>

संरचना

.instui-tray
  close-button (component, 0..1)
  ‹content›

flowchart TD n0[".instui-tray"]:::cssdoc-root n1(["close-button"]):::cssdoc-component n2[/"‹content›"/]:::cssdoc-slot n0 -.->|0..1| n1 n0 --> n2 click n1 "/api/css/close-button.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;

मॉडिफायर

मॉडिफायर	विवरण
.-placement-bottom	नीचे के किनारे पर पिन करें।
.-placement-end	अंत (inline-end) किनारे पर पिन करें।
.-placement-start	(डिफ़ॉल्ट) शुरुआत (inline-start) किनारे पर पिन करें।
.-placement-top	ऊपर के किनारे पर पिन करें।
.-size-large	बड़ा। -size-lg का लंबा-फॉर्म उपनाम।
.-size-lg	बड़ा।
.-size-md	(डिफ़ॉल्ट) मध्यम।
.-size-medium	(डिफ़ॉल्ट) मध्यम। -size-md का लंबा-फॉर्म उपनाम।
.-size-regular	अप्रमाणित — use .-size-md.
.-size-sm	छोटा।
.-size-small	छोटा। -size-sm का लंबा-फॉर्म उपनाम।
.-size-x-large	अतिरिक्‍त बड़ा। -size-xl का लंबा-फॉर्म उपनाम।
.-size-x-small	अतिरिक्‍त छोटा। -size-xs का लंबा-फॉर्म उपनाम।
.-size-xl	अतिरिक्‍त बड़ा।
.-size-xs	अतिरिक्‍त छोटा।

शर्तें

प्रकार	क्वेरी	विवरण
supports	(transition-behavior: allow-discrete)	—

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

Token	प्रकार	मान
--instui-component-tray-background-color	<color>	LightDarklight-dark(#ffffff, #1C222B)
--instui-component-tray-border-color	<color>	LightDarklight-dark(#E8EAEC, #334450)
--instui-component-tray-border-width	<length>	0.0625rem
--instui-component-tray-padding	<length>	1.5rem
--instui-component-tray-width-lg	<length>	48em
--instui-component-tray-width-md	<length>	30em
--instui-component-tray-width-sm	<length>	20em
--instui-component-tray-width-xl	<length>	62em
--instui-component-tray-width-xs	<length>	16em
--instui-component-tray-z-index	<integer>	9999
--instui-elevation-topmost	none | <shadow>#	—
--tray-slide-x	—	-100%
--tray-slide-y	—	0%

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

• नेटिव [popover] API और @starting-style के साथ खुलता है; स्लाइड-इन एक @supports (transition-behavior: allow-discrete) गार्ड के पीछे बैठता है, इसलिए जिन ब्राउज़रों में यह गार्ड नहीं है वे भी ट्रे खोलते हैं, बस स्लाइड के बिना।

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

• close-button

संबंधित

• modal — वही डिस्मिसिबल ओवरले पैटर्न, किनारे पर पिन करने के बजाय केन्द्रित।
• popover — वह सामान्य टॉप-लेयर सतह जिस पर यह बनाया गया है।