CSS: context-view ​

.instui-context-view — Sebuah callout berpangkat dengan caret, dapat ditempatkan di sisi manapun; berfungsi sebagai [popover] native.

Caret adalah dua segitiga bertumpuk ::before/::after (border lalu fill) sehingga terlihat benar pada permukaan yang cocok; sebagai [popover] ia memerlukan pengkabelan open/popovertarget yang sama seperti popover, tetapi tidak seperti tooltip, ia menutup saat 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>

Modifikator ​

ModifikatorDeskripsi
.-color-inverseSkema warna gelap (inverse).
.-placement-bottomDuduk di bawah anchor.
.-placement-endDuduk di akhir (inline-end) anchor.
.-placement-startDuduk di awal (inline-start) anchor.
.-placement-topDuduk di atas anchor.

Pseudo-elemen ​

Pseudo-elemenDeskripsi
::afterMerender segitiga isi bagian dalam caret.
::beforeMerender segitiga border luar caret.

Status ​

StatusDeskripsi
:state(open)—

Kondisi ​

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

Token yang digunakan ​

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

Dukungan peramban ​

  • Menggunakan penempatan anchor CSS (position-anchor, position-area, position-try-fallbacks) dan API [popover] native di balik pengaman @supports; membutuhkan Chromium atau Safari versi terbaru, dan kembali ke popover yang dipusatkan oleh UA di tempat lain.

Terkait ​

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