CSS: context-view

.instui-context-view — Korotettu kehote, jossa on caret (nuoli), sijoitettavissa mihin tahansa sivulle; toimii natiivina [popover].

Caret on kaksi päällekkäistä ::before/::after-kolmiota (reunus sitten täyte), joten se näkyy oikein vastaavalla pinnalla; [popover]-elementtinä se tarvitsee saman open/popovertarget-kytkennän kuin popover, mutta toisin kuin tooltip, se sulkeutuu ulkopuoliseen klikkaukseen tai Escapeen.

Source: context-view.css

Käyttö

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

Esimerkit

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

Muokkaajat

Muokkaaja	Kuvaus
.-color-inverse	Tumma (käänteinen) väriteema.
.-placement-bottom	Sijoittuu ankkurin alle.
.-placement-end	Sijoittuu ankkurin loppuun (inline-end).
.-placement-start	Sijoittuu ankkurin alkuun (inline-start).
.-placement-top	Sijoittuu ankkurin yläpuolelle.

Pseudo-elementit

Pseudo-elementti	Kuvaus
::after	Piirtää caretin sisemmän täytekolmion.
::before	Piirtää caretin ulomman reunakolmion.

Tilat

Tila	Kuvaus
:state(open)	—

Ehdot

Tyyppi	Kysely	Kuvaus
supports	(position-area: block-end)	—

Käytetyt tokenit

Token	Tyyppi	Arvo
--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

Selaintuki

• Käyttää CSS-ankkurointiasemointia (position-anchor, position-area, position-try-fallbacks) ja natiivin [popover]-API:n takana olevaa @supports-suojausta; vaatii tuoreen Chromium- tai Safari-version, ja muissa selaimissa palaa selainkohtaisesti keskitettyyn popoveriin.

Liittyvät

• popover — Geneerinen päällimmäinen popover.
• tooltip — Pienempi hover- tai fokus-kehote.