CSS: mask ​

.instui-mask — ชั้นวางทับ (in-flow overlay) ที่เติมเต็มพาเรนต์ที่กำหนดตำแหน่งไว้และจัดกึ่งกลางเนื้อหา — เช่น สปินเนอร์ที่อยู่เหนือการ์ด ตัวอย่างการใช้งานสำหรับม็อดัล ให้เลือกใช้ <dialog> แบบ native (::backdrop ของมันคือมาสก์). ตัวดัดแปลงแต่ละตัวนี้ยังมีให้ใช้ในระดับโลกได้เช่นกัน (แบบเปล่า ๆ หรือต่อกับคอมโพเนนต์อื่น) — ดูยูทิลิตี้ระดับโลก mask.

Source: mask.css

การใช้งาน ​

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

ตัวอย่าง ​

html
<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))