CSS: context-view ​

.instui-context-view — คำอธิบายแบบยกขึ้นที่มีลูกศรปากกา (caret) สามารถวางตำแหน่งได้ทุกด้าน; ทำงานเหมือน [popover] แบบเนทีฟ.

ลูกศรปากกาประกอบด้วยสามเหลี่ยมซ้อนกันสองชั้น ::before/::after (ขอบแล้วเติม) เพื่อให้แสดงผลถูกต้องกับพื้นผิวที่เข้าคู่กัน; ในฐานะ [popover] จะต้องมีการต่อสาย open/popovertarget เหมือนกับ popover แต่แตกต่างจาก tooltip ตรงที่จะปิดเมื่อคลิกนอกองค์ประกอบหรือกด Escape.

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

รองรับเบราว์เซอร์ ​

  • ใช้การจัดตำแหน่ง anchor ของ CSS (position-anchor, position-area, position-try-fallbacks) และ API [popover] แบบเนทีฟ ภายใต้การคุ้มกันของ @supports; ต้องการ Chromium หรือ Safari เวอร์ชันใหม่ และจะถอยกลับไปใช้ popover ที่ศูนย์กลาง UA ในที่อื่น ๆ.

ที่เกี่ยวข้อง ​

  • popover — popover ท็อปเลเยอร์ทั่วไป
  • tooltip — คำอธิบายเล็กลงสำหรับ hover หรือ focus.