CSS: context-view
.instui-context-view — Egy emelt hívás karettel, bármely oldalon elhelyezhető; natív [popover] -ként működik.
Forrás: context-view.css
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/context-view.css";Példák
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>Módosítók
| Módosító | Leírás |
|---|---|
.-color-inverse | Sötét (inverz) színséma. |
.-placement-bottom | Ülj az horgony alatt. |
.-placement-end | Ülj a horgony végén (inline-end). |
.-placement-start | Ülj a horgony kezdetén (inline-start). |
.-placement-top | Ülj a horgony felett. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::after | A karet belső kitöltő háromszögét jeleníti meg. |
::before | A karet külső szegély háromszögét jeleníti meg. |
Állapotok
| Állapot | Leírás |
|---|---|
:state(open) | — |
Feltételek
| Típus | Lekérdezés | Leírás |
|---|---|---|
| supports | (position-area: block-end) | — |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-color-background-elevated-surface-base | <color> | light-dark(#ffffff, #171B21)LightDark |
--instui-color-background-inverse | <color> | light-dark(#334450, #F2F4F5)LightDark |
--instui-color-text-base | <color> | light-dark(#273540, #F2F4F5)LightDark |
--instui-color-text-inverse | <color> | light-dark(#ffffff, #1C222B)LightDark |
--instui-component-context-view-arrow-background-color | <color> | light-dark(#ffffff, #171B21)LightDark |
--instui-component-context-view-arrow-background-color-inverse | <color> | light-dark(#334450, #F2F4F5)LightDark |
--instui-component-context-view-arrow-border-color | <color> | light-dark(#E8EAEC, #2D3D49)LightDark |
--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 | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-spacing-space-lg | <length> | 1rem |
--instui-spacing-space-md | <length> | 0.75rem |
Böngészőtámogatás
- A CSS anchor positioning-ot (
position-anchor,position-area,position-try-fallbacks) és a natív[popover]API-t használja egy@supportsvédelem mögött; friss Chromium vagy Safari szükséges, és máshol egy UA-központú popover-re esik vissza.