CSS: context-view ​

.instui-context-view — एक उठाया हुआ कॉलआउट जिसमें एक केयरट होता है, किसी भी तरफ स्थान निर्धारित किया जा सकता है; नेटिव [popover] के रूप में कार्य करता है।

केयरट दो स्टैक किए हुए ::before/::after त्रिकोण होते हैं (पहले बॉर्डर फिर फिल) ताकि यह मेल खाने वाली सतह के खिलाफ सही तरीके से पढ़े; एक [popover] के रूप में इसे वही open/popovertarget वायरिंग चाहिए जैसा popover में है, परंतु tooltip के विपरीत, यह बाहर के क्लिक या Escape पर dismiss हो जाता है।

Source: context-view.css

उपयोग ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/context-view.css";

उदाहरण ​

html
<div class="instui-context-view -placement-bottom" id="cv-popover">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>

मॉडिफायर ​

मॉडिफायरविवरण
.-color-inverseडार्क (उल्टी) रंग स्कीम।
.-placement-bottomएंकर के नीचे स्थित करें।
.-placement-endएंकर के अंत (inline-end) पर स्थित करें।
.-placement-startएंकर की शुरुआत (inline-start) पर स्थित करें।
.-placement-topएंकर के ऊपर स्थित करें।

स्यूडो-एलिमेंट्स ​

स्यूडो-एलिमेंटविवरण
::afterकेयरट के अंदर के फिल त्रिकोण को रेंडर करता है।
::beforeकेयरट के बाहरी बॉर्डर त्रिकोण को रेंडर करता है।

स्टेट्स ​

स्थितिविवरण
:state(open)—

शर्तें ​

प्रकारक्वेरीविवरण
supports(position-area: block-end)—

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

Tokenप्रकारमान
--instui-color-background-elevated-surface-base<color>LightDarklight-dark(#ffffff, #171B21)
--instui-color-background-inverse<color>LightDarklight-dark(#334450, #F2F4F5)
--instui-color-text-base<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-color-text-inverse<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-context-view-arrow-background-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-context-view-arrow-background-color-inverse<color>LightDarklight-dark(#334450, #F2F4F5)
--instui-component-context-view-arrow-border-color<color>LightDarklight-dark(#E8EAEC, #2D3D49)
--instui-component-context-view-arrow-border-color-inverse<color>#00000000
--instui-component-context-view-arrow-border-width<length>0.0625rem
--instui-component-context-view-arrow-size<length>0.5rem
--instui-component-context-view-border-radius<length>0.75rem
--instui-elevation-abovenone | <shadow>#—
--instui-spacing-space-lg<length>1rem
--instui-spacing-space-md<length>0.75rem

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

  • CSS एंकर पोजिशनिंग (position-anchor, position-area, position-try-fallbacks) और नेटिव [popover] API का उपयोग करता है, जो एक @supports गार्ड के पीछे रहता है; इसके लिए नवीनतम Chromium या Safari चाहिए, और अन्यत्र यह UA-केंद्रित popover पर वापस चला जाता है।

संबंधित ​

  • popover — सामान्य टॉप-लेयर popover।
  • tooltip — एक छोटी hover या focus कॉलआउट।