CSS: mask

.instui-mask — 一種流程內覆層，填滿其已定位的父容器並將內容置中 — 例如卡片上的載入指示器。對於模態視窗（modal），建議使用原生的 <dialog>（其 ::backdrop 即為遮罩）。這些 modifier 每一個也都可全域使用（獨立或串接到其他元件）— 參見 mask 全域工具。

Source: mask.css

使用方法

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

範例

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

修飾器

修飾器	說明
.-blur	使用 backdrop-filter 模糊遮罩後方的內容。
.-fullscreen	固定於視窗（viewport），以高 z-index 覆蓋其上。

已使用的代幣

Token	型別	值
--instui-component-mask-background-color	<color>	LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))