CSS: maskglobal ​

.--mask-overlay — สำเนาคู่ระดับโลกของตัวแก้ไขโอเวอร์เลย์ของคอมโพเนนต์ mask — --mask-overlay, --mask-fullscreen, --mask-blur — ใช้งานได้แบบเปล่าๆ หรือต่อเชนเข้ากับคอมโพเนนต์ใดก็ได้ โดยไม่ต้องห่อในองค์ประกอบ .instui-mask.

Source: index.ts

การใช้งาน ​

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

ตัวอย่าง ​

html
<button class="instui-button --mask-overlay">…</button>

ตัวปรับแต่ง ​

ตัวปรับแต่งคำอธิบาย
.--mask-blurเบลอสิ่งที่อยู่ด้านหลังมาสก์ด้วย backdrop-filter.
.--mask-fullscreenตรึงไว้กับ viewport ครอบคลุมพื้นที่โดยมี z-index สูง.
.--mask-overlayโอเวอร์เลย์หน้ากากเต็มรูปแบบ (ตำแหน่ง, การจัดกึ่งกลาง, พื้นหลัง).

โทเค็นที่ใช้ ​

Tokenชนิดค่า
--instui-component-mask-background-color<color>LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))