CSS: context-view ​

.instui-context-view — Pemberitahuan timbul bertingkat dengan caret, boleh diletakkan pada mana-mana sisi; berfungsi sebagai [popover] asli.

Caret terdiri daripada dua segitiga bertindan ::before/::after (garis kemudian isian) supaya ia kelihatan betul terhadap permukaan sepadan; sebagai [popover] ia memerlukan sambungan buka/popovertarget yang sama seperti popover, tetapi tidak seperti tooltip, ia ditutup apabila diklik di luar atau menekan Escape.

Source: context-view.css

Penggunaan ​

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

Contoh ​

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>

Pemodifikasi ​

PemodifikasiPenerangan
.-color-inverseSkema warna Gelap (terbalik).
.-placement-bottomTerletak di bawah jangkar.
.-placement-endTerletak di hujung (inline-end) jangkar.
.-placement-startTerletak di permulaan (inline-start) jangkar.
.-placement-topTerletak di atas jangkar.

Pseudo-elemen ​

Pseudo-elemenPenerangan
::afterMemaparkan segitiga isian dalaman caret.
::beforeMemaparkan segitiga bingkai luar caret.

Keadaan ​

KeadaanPenerangan
:state(open)—

Syarat ​

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

Token digunakan ​

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

Sokongan pelayar ​

  • Menggunakan penempatan anchor CSS (position-anchor, position-area, position-try-fallbacks) dan API [popover] asli di sebalik pengawal @supports; memerlukan Chromium atau Safari terkini, dan kembali kepada popover berpusatkan UA di tempat lain.

Berkaitan ​

  • popover — Popover lapisan atas generik.
  • tooltip — Callout yang lebih kecil untuk hover atau fokus.