OverlayMask

화면 전체를 덮는 마스크 레이어로, 다이얼로그/드로어 등 오버레이 컴포넌트 표시 시 배경을 차폐하고 포커스를 고정하는 데 사용합니다.

Basic

<script setup lang="ts">
import { ref } from 'vue';
import { OverlayMask, Btn } from '@jennifersoft/vue-components-v2';

const show = ref(false);
</script>

<template>
    <Btn type="primary-filled" text="Show Mask" @click="show = true" />

    <OverlayMask v-if="show" @click.self="show = false">
        <div
            style="background: var(--surface-200); padding: 16px; border-radius: 8px; box-shadow: var(--box-shadow-500);"
        >
            <div class="typo-body-medium mb-3">오버레이 안의 콘텐츠</div>
            <Btn type="outlined" text="닫기" @click="show = false" />
        </div>
    </OverlayMask>
</template>

Props

이 컴포넌트는 Props를 받지 않습니다.

Slots

• default: 마스크 중앙에 표시할 콘텐츠를 전달합니다.

참고

• 내부적으로 v-z-index 디렉티브를 사용해 오버레이 레이어 순서를 관리합니다.
• 스타일 클래스 .js-overlay-mask는 전체 화면 고정, 중앙 정렬, 반투명 배경(--overlay-black-600)을 적용합니다.