CSS: context-view ​

.instui-context-view — キャレット付きの強調コールアウト。任意の側に配置可能で、ネイティブの [popover] として動作します。

キャレットは二重に重ねた ::before/::after の三角形（境界線と塗り）で構成され、対応する表面上でも正しく見えるようになっています。[popover] としては、popover と同じ開閉/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）と、@supports のガードの背後にあるネイティブの [popover] API を使用します。最近の Chromium または Safari が必要で、その他の環境では UA 中心のポップオーバーにフォールバックします。

関連項目 ​

  • popover — 汎用の最上位ポップオーバーです。
  • tooltip — 小さめのホバーまたはフォーカス用コールアウトです。