Modal 對話框

用於確認操作、填寫表單或顯示詳細內容的覆蓋層。透過 <Teleport to="body"> 渲染，避免 z-index 堆疊問題。

Demo

Glass Modal

大尺寸 Glass Modal

使用方式

<script setup lang="ts">
import { ref } from 'vue'
import { LiquidModal, LiquidButton } from '@liquid/ui'

const isOpen = ref(false)
</script>

<template>
  <LiquidButton @click="isOpen = true">Open Modal</LiquidButton>

  <LiquidModal
    v-model="isOpen"
    title="Confirm Delete"
    size="md"
    :show-close="true"
  >
    <!-- 預設 slot：Modal 內容 -->
    <p>Are you sure you want to delete this item?</p>

    <!-- 具名 slot：底部操作區 -->
    <template #footer>
      <LiquidButton variant="outline" @click="isOpen = false">Cancel</LiquidButton>
      <LiquidButton variant="danger" @click="handleDelete">Delete</LiquidButton>
    </template>
  </LiquidModal>
</template>

Props

Prop	型別	預設值	說明
modelValue	boolean	false	控制顯示狀態（配合 v-model 使用）
title	string	''	Modal 標題列文字
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Modal 寬度
variant	'default' | 'glass-css-only' | 'glass-highlight-layered'	'default'	視覺樣式
showClose	boolean	true	是否顯示標題列的 × 關閉按鈕

Events

事件	Payload	說明
update:modelValue	boolean	當 Modal 應關閉時觸發（點擊遮罩或 × 按鈕）

Slots

Slot	說明
default	Modal 主體內容
footer	底部區域（通常為操作按鈕）

注意事項

• Modal 使用 <Teleport to="body">，因此始終渲染於所有內容之上。
• 點擊遮罩背景會觸發 update:modelValue 事件，傳入 false 來關閉 Modal。
• 在 VitePress 中，請將 <LiquidModal> 包裹在 <ClientOnly> 內，以避免 Teleport 的 SSR 水合問題。