CSS: mask

.instui-mask — Một lớp phủ in-flow chiếm toàn bộ phần tử cha đang được định vị và căn giữa nội dung — ví dụ: một spinner phủ lên một card. Đối với modal, ưu tiên <dialog> native ( ::backdrop của nó là mask). Mỗi modifier này cũng có sẵn ở mức toàn cục (trực tiếp, hoặc nối chuỗi vào bất kỳ component nào khác) — xem tiện ích toàn cục mask.

Source: mask.css

Sử dụng

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

Các ví dụ

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

Bộ sửa

Bộ sửa	Mô tả
.-blur	Làm mờ những gì ở phía sau mask bằng backdrop-filter.
.-fullscreen	Cố định vào viewport, che phủ nó với z-index cao.

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-component-mask-background-color	<color>	LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))