CSS: context-view ​

.instui-context-view — Ein hervorgehobenes Hinweisfeld mit einem Caret, positionierbar an jeder Seite; funktioniert als natives [popover].

Der Caret besteht aus zwei übereinanderliegenden ::before/::after-Dreiecken (Rand und Füllung), sodass er vor einer passenden Oberfläche korrekt lesbar ist; als [popover] benötigt er dieselbe Open-/popovertarget-Verdrahtung wie popover, aber im Gegensatz zu tooltip wird er bei Klick außerhalb oder bei Escape geschlossen.

Source: context-view.css

Verwendung ​

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

Beispiele ​

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>

Modifikatoren ​

ModifikatorBeschreibung
.-color-inverseDunkles (invertiertes) Farbschema.
.-placement-bottomUnter dem Anker platzieren.
.-placement-endAm Ende (inline-end) des Ankers positionieren.
.-placement-startAm Anfang (inline-start) des Ankers positionieren.
.-placement-topÜber dem Anker platzieren.

Pseudo-Elemente ​

Pseudo-ElementBeschreibung
::afterRendert das innere Füll-Dreieck des Carets.
::beforeRendert das äußere Rand-Dreieck des Carets.

Zustände ​

ZustandBeschreibung
:state(open)—

Bedingungen ​

TypAbfrageBeschreibung
supports(position-area: block-end)—

Verbrauchte Tokens ​

TokenTypWert
--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

Browser-Unterstützung ​

  • Verwendet CSS-Anker-Positionierung (position-anchor, position-area, position-try-fallbacks) und die native [popover]-API hinter einer @supports-Schutzschicht; benötigt ein aktuelles Chromium oder Safari und fällt andernorts auf ein vom User-Agent zentriertes Popover zurück.

Verwandt ​

  • popover — Das generische Popover der oberen Ebene.
  • tooltip — Ein kleinerer Hover- oder Fokus-Hinweis.