CSS: context-view ​

.instui-context-view — 一種帶有尖角的強調提示框，可將尖角置於任意一側；作為原生 [popover] 使用時亦可正常運作。

尖角由兩個堆疊的 ::before/::after 三角形（先邊框再填充）構成，能在匹配的表面上正確顯示；作為 [popover] 時需要與 popover 相同的 open/popovertarget 配線，但與 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

瀏覽器支援 ​

  • 使用 CSS 錨點定位（position-anchor, position-area, position-try-fallbacks）以及原生 [popover] API，並在 @supports 保護下啟用；需要較新的 Chromium 或 Safari，其他環境則回退到以使用者代理為中心的彈出層。

相關 ​

  • popover — 通用的頂層彈出層。
  • tooltip — 較小的懸停或聚焦提示。