CSS: context-view

.instui-context-view — Egy kiemelt callout caret-tal, bármelyik oldalra pozicionálható; natív [popover]-ként működik.

Az indikátor két egymásra helyezett ::before/::after háromszög (először a keret, majd a kitöltés), így jól olvasható egy illeszkedő felületen; [popover]-ként ugyanazt az open/popovertarget összekötést igényli, mint a popover, de a tooltip-tól eltérően külső kattintásra vagy Escape-re bezáródik.

Source: context-view.css

Használat

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

Példák

<div class="instui-context-view -placement-bottom" id="cv-popover">A context view egy carettel rendelkező calloutot keretez. Popoverként a felső rétegen jelenik meg, és bezárul, ha máshova kattintasz vagy megnyomod az Esc billentyűt.</div>

Módosítók

Módosító	Leírás
.-color-inverse	Sötét (inverz) színséma.
.-placement-bottom	Helyezkedjen el a horgony alatt.
.-placement-end	A horgony végén (inline-end) helyezkedik el.
.-placement-start	A horgony elején (inline-start) helyezkedik el.
.-placement-top	Helyezkedjen a horgony fölé.

Pseudo-elemek

Pseudo-elem	Leírás
::after	Kirajzolja a caret belső kitöltő háromszögét.
::before	Kirajzolja a caret külső szegélyének háromszögét.

Állapotok

Állapot	Leírás
:state(open)	—

Feltételek

Típus	Lekérdezés	Leírás
supports	(position-area: block-end)	—

Fogyasztott tokenek

Token	Típus	Érték
--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

Böngészőtámogatás

CSS anchor pozicionálást (position-anchor, position-area, position-try-fallbacks) és a natív [popover] API-t @supports őr mögé rejtve használja; modern Chromiumot vagy Safarit igényel, és máshol a felhasználói ügynök (UA) középre helyezett popoverére esik vissza.

Kapcsolódó

• popover — Általános, legfelső rétegű popover.
• tooltip — Egy kisebb, lebegéskor vagy fókusz esetén megjelenő felugró.