CSS: context-view ​

.instui-context-view — Izbočen poziv s puščico, ki ga je mogoče postaviti na katero koli stran; deluje kot izvorni [popover].

Puščica je sestavljena iz dveh zloženih ::before/::after trikotnikov (rob, nato polnilo), tako da se pravilno prikaže na ujemajoči se površini; kot [popover] potrebuje enako vezavo open/popovertarget kot popover, vendar se, za razliko od tooltip, zapre ob kliku zunaj ali pritisku Escape.

Source: context-view.css

Uporaba ​

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

Primeri ​

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>

Spremenljivke (modifikatorji) ​

ModifikatorOpis
.-color-inverseTemna (inverzna) barvna shema.
.-placement-bottomPostavi se pod sidro.
.-placement-endPostavi se na konec (inline-end) sidra.
.-placement-startPostavi se na začetek (inline-start) sidra.
.-placement-topPostavi se nad sidro.

Psevdo-elementi ​

Psevdo-elementOpis
::afterPrikaže notranji polnilski trikotnik puščice.
::beforePrikaže zunanji robni trikotnik puščice.

Stanja ​

StanjeOpis
:state(open)—

Pogoji ​

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

Porabljeni žetoni ​

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

Podpora brskalnika ​

  • Uporablja CSS anchor pozicioniranje (position-anchor, position-area, position-try-fallbacks) in izvorni [popover] API za @supports varovalko; zahteva sodoben Chromium ali Safari in drugod pade nazaj na UA-centrični popover.

Sorodno ​

  • popover — Splošni popover v zgornjem sloju.
  • tooltip — Manjši opomnik ob lebdenju ali fokusu.