CSS: context-view

.instui-context-view — En forhøyet merknad med en caret, kan plasseres på hvilken som helst side; fungerer som en native [popover].

Caret-en er to stablede ::before/::after-trekanter (kant og fylning) slik at den leses riktig mot en matchende overflate; som en [popover] trenger den samme åpne/popovertarget-koblingen som popover, men i motsetning til tooltip avvises den ved klikk utenfor eller Escape.

Source: context-view.css

Bruk

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

Eksempler

<div class="instui-context-view -placement-bottom" id="cv-popover">En kontekstvisning innrammer en callout med en caret. Som en popover ligger den på topplaget og lukkes når du klikker utenfor eller trykker Esc.</div>

Modifikatorer

Modifikator	Beskrivelse
.-color-inverse	Mørkt (inverse) fargeskjema.
.-placement-bottom	Plasser under ankeret.
.-placement-end	Plasser ved slutten (inline-end) av ankeret.
.-placement-start	Plasser ved starten (inline-start) av ankeret.
.-placement-top	Plasser over ankeret.

Pseudo-elementer

Pseudo-element	Beskrivelse
::after	Renderer caret-ens indre fylningstrekant.
::before	Renderer caret-ens ytre kanttrekant.

Tilstander

Tilstand	Beskrivelse
:state(open)	—

Betingelser

Type	Spørring	Beskrivelse
supports	(position-area: block-end)	—

Forbrukte tokens

Token	Type	Verdi
--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-above	none | <shadow>#	—
--instui-spacing-space-lg	<length>	1rem
--instui-spacing-space-md	<length>	0.75rem

Nettleserstøtte

• Bruker CSS-ankerposisjonering (position-anchor, position-area, position-try-fallbacks) og den native [popover]-APIen bak en @supports-vakt; krever en nyere Chromium eller Safari, og faller tilbake til en nettleser-sentrert popover andre steder.

Relatert

• popover — Den generiske topplags popoveren.
• tooltip — En mindre hover- eller fokusmerknad.