Skip to content

CSS: mask

.instui-mask — Sebuah overlay dalam aliran yang mengisi parent yang diposisikan dan memusatkan kontennya — mis. sebuah spinner di atas kartu. Untuk modal, lebih baik gunakan <dialog> native ( ::backdrop-nya adalah mask). Setiap modifier ini juga tersedia secara global (tanpa prefix, atau dirangkai ke komponen lain) — lihat utilitas global mask.

Source: mask.css

Penggunaan

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/mask.css";

Contoh

html
<div style="position: relative">
  <div class="instui-mask">
    <span class="instui-spinner"></span>
  </div>
</div>

Modifikator

ModifikatorDeskripsi
.-blurBuramkan apa yang ada di belakang mask dengan backdrop-filter.
.-fullscreenTetap diposisikan pada viewport, menutupi dengan z-index tinggi.

Token yang digunakan

TokenTipeNilai
--instui-component-mask-background-color<color>LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))