Mask

Modal mask layer component for blocking user interaction, with customizable background color and transition animations.

Basic Usage

The simplest usage with default background color.

<template>
  <u-button @click="visible = true" color="primary">Open Mask</u-button>
  <div class="mask-container">
    <u-mask v-model="visible">
      <div class="mask-center-content">
        <u-card>
          <u-card-title>Mask Content</u-card-title>
          <u-card-text>
            <p>This is a mask layer with content.</p>
          </u-card-text>
          <div class="mask-actions">
            <u-button @click="visible = false" color="primary">Close</u-button>
          </div>
        </u-card>
      </div>
    </u-mask>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

Custom Background Color

Set custom background color via bg prop.

<template>
  <u-button @click="visible = true" color="success">Open Dark Mask</u-button>
  <div class="mask-container">
    <u-mask v-model="visible" bg="rgba(0, 0, 0, 0.85)">
      <div class="mask-center-content">
        <u-card>
          <u-card-title>Dark Background</u-card-title>
          <u-card-text>
            <p>This mask has a darker background.</p>
          </u-card-text>
          <div class="mask-actions">
            <u-button @click="visible = false" color="primary">Close</u-button>
          </div>
        </u-card>
      </div>
    </u-mask>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

Disable Close on Click

Prevent mask from closing when clicking the mask area.

<template>
  <u-button @click="visible = true" color="warning">Disable Click Close</u-button>
  <div class="mask-container">
    <u-mask v-model="visible" :close-on-click="false">
      <div class="mask-center-content">
        <u-card>
          <u-card-title>Disable Click Close</u-card-title>
          <u-card-text>
            <p>Clicking the mask area won't close it.</p>
          </u-card-text>
          <div class="mask-actions">
            <u-button @click="visible = false" color="primary">Close</u-button>
          </div>
        </u-card>
      </div>
    </u-mask>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

Usage with Dialog

Mask layer is commonly used with dialog components.

<template>
  <u-button @click="visible = true" color="error">Open Dialog</u-button>
  <div class="mask-container">
    <u-mask v-model="visible">
      <div class="mask-center-content">
        <u-card>
          <u-card-title>User Settings</u-card-title>
          <u-card-text>
            <p>This is an example of a dialog used with a mask layer.</p>
          </u-card-text>
          <div class="mask-actions">
            <u-button @click="visible = false">Cancel</u-button>
            <u-button @click="visible = false" color="primary">Save</u-button>
          </div>
        </u-card>
      </div>
    </u-mask>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

UMask API

Property	Description	Type	Default
modelValue	Whether to show the mask	boolean	false
closeOnClick	Whether to close on mask click	boolean	true
bg	Custom background color	string	var(--u-mask-bg)

UMask Slots

Slot	Description
default	Content inside mask