CSS: context-view ​

.instui-context-view — Galwad wedi'i godi gyda chareth, gellir ei lleoli ar unrhyw ochr; yn gweithio fel [popover] naturiol.

Mae'r careth yn ddwy draingl ::before/::after wedi'u stacio (ffrâm yna llenwad) felly mae'n darllen yn gywir yn erbyn arwyneb cydweddu; fel [popover] mae'n angen yr un wifrenio agor/popovertarget â popover, ond yn wahanol i tooltip mae'n cau pan gliciwch y tu allan neu pan wasgwch Escape.

Source: context-view.css

Defnydd ​

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

Enghreifftiau ​

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>

Modyfiwyr ​

ModyfiwrDisgrifiad
.-color-inverseCynllun lliw tywyll (gwrthdro).
.-placement-bottomGosodwch o dan yr ancor.
.-placement-endGosodwch ar ddiwedd (inline-end) yr ancor.
.-placement-startGosodwch ar y dechrau (inline-start) yr ancor.
.-placement-topGosodwch uwchben yr ancor.

Is-elfennau ​

Is-elfenDisgrifiad
::afterYn rendro triongl llenwi mewnol y careth.
::beforeYn rendro triongl ffin allanol y careth.

Statwsau ​

StatwsDisgrifiad
:state(open)—

Amodau ​

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

Tocynnau a ddefnyddiwyd ​

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

Cefnogaeth porwr ​

  • Yn defnyddio lleoliad ancor CSS (position-anchor, position-area, position-try-fallbacks) a'r API naturiol [popover] tu ôl i warchod @supports; mae angen Chromium neu Safari diweddar, ac yn disgyn yn ôl i popover wedi'i ganoli gan y UA mewn mannau eraill.

Perthnasol ​

  • popover — Y popover haen-uchaf cyffredinol.
  • tooltip — Galwad llai ar hofran neu pan fydd wedi'i ffocysu.