BreezeUI
  • 简体中文

    • Dialog 对话框

    覆盖在主窗口或其他对话框窗口上的窗口，使下方的内容处于惰性状态。

    组件特性

    • 🪟 模态和全屏：支持模态和全屏模式。
    • ✋ 可拖拽：支持拖拽移动对话框。
    • 📐 可调整大小：支持调整手柄改变对话框大小。
    • ✖️ 关闭按钮：内置关闭按钮，支持可配置的触发行为。
    • ⌨️ 键盘支持：支持 Esc 关闭，点击外部关闭，焦点陷阱。
    • 🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

    基础用法

    <script setup lang="ts">
import { BrDialog, BrDialogTrigger, BrDialogContent, BrDialogHeader, BrDialogTitle, BrDialogDescription, BrDialogFooter, BrButton, BrInput, BrLabel, BrDialogClose } from '@breezeui/vue'
</script>

<template>
  <BrDialog>
    <BrDialogTrigger as-child>
      <BrButton outline>Edit Profile</BrButton>
    </BrDialogTrigger>
    <BrDialogContent class="sm:max-w-[425px]">
      <BrDialogHeader>
        <BrDialogTitle>Edit profile</BrDialogTitle>
        <BrDialogDescription>
          Make changes to your profile here. Click save when you're done.
        </BrDialogDescription>
      </BrDialogHeader>
      <div class="grid gap-4 py-4">
        <div class="grid grid-cols-4 items-center gap-4">
          <BrLabel for="name" class="text-right">Name</BrLabel>
          <BrInput id="name" value="Pedro Duarte" class="col-span-3" />
        </div>
        <div class="grid grid-cols-4 items-center gap-4">
          <BrLabel for="username" class="text-right">Username</BrLabel>
          <BrInput id="username" value="@peduarte" class="col-span-3" />
        </div>
      </div>
      <BrDialogFooter>
        <BrDialogClose as-child>
          <BrButton type="button" outline>Cancel</BrButton>
        </BrDialogClose>
        <BrButton type="submit">Save changes</BrButton>
      </BrDialogFooter>
    </BrDialogContent>
  </BrDialog>
</template>

    自定义底部

    你可以自定义底部操作。

    <script setup lang="ts">
import { BrDialog, BrDialogTrigger, BrDialogContent, BrDialogHeader, BrDialogTitle, BrDialogDescription, BrDialogFooter, BrButton, BrDialogClose } from '@breezeui/vue'
</script>

<template>
  <BrDialog>
    <BrDialogTrigger as-child>
      <BrButton color="danger">Delete Account</BrButton>
    </BrDialogTrigger>
    <BrDialogContent>
      <BrDialogHeader>
        <BrDialogTitle>Are you absolutely sure?</BrDialogTitle>
        <BrDialogDescription>
          This action cannot be undone. This will permanently delete your account and remove your data from our servers.
        </BrDialogDescription>
      </BrDialogHeader>
      <BrDialogFooter>
        <BrDialogClose as-child>
          <BrButton type="button" outline>
            Cancel
          </BrButton>
        </BrDialogClose>
        <BrButton type="button" color="danger">
          Yes, Delete
        </BrButton>
      </BrDialogFooter>
    </BrDialogContent>
  </BrDialog>
</template>

    全屏

    对话框可以覆盖整个屏幕。

    <script setup lang="ts">
import { BrDialog, BrDialogTrigger, BrDialogContent, BrDialogHeader, BrDialogTitle, BrDialogDescription, BrButton } from '@breezeui/vue'
</script>

<template>
  <BrDialog>
    <BrDialogTrigger as-child>
      <BrButton>Open Fullscreen Dialog</BrButton>
    </BrDialogTrigger>
    <BrDialogContent fullscreen>
      <BrDialogHeader>
        <BrDialogTitle>Fullscreen Dialog</BrDialogTitle>
        <BrDialogDescription>
          This dialog covers the entire screen.
        </BrDialogDescription>
      </BrDialogHeader>
      <div class="flex-1 overflow-auto p-4">
        <p v-for="i in 20" :key="i" class="mb-4">
          Scrollable content... {{ i }}
        </p>
      </div>
    </BrDialogContent>
  </BrDialog>
</template>

    可拖拽与调整大小

    对话框可以通过标题拖拽和调整大小。

    <script setup lang="ts">
import { BrDialog, BrDialogTrigger, BrDialogContent, BrDialogHeader, BrDialogTitle, BrDialogDescription, BrButton } from '@breezeui/vue'
</script>

<template>
  <BrDialog>
    <BrDialogTrigger as-child>
      <BrButton>Open Draggable Dialog</BrButton>
    </BrDialogTrigger>
    <BrDialogContent draggable resizable class="sm:max-w-[500px]">
      <BrDialogHeader>
        <BrDialogTitle>Draggable & Resizable Dialog</BrDialogTitle>
        <BrDialogDescription>
          You can drag this dialog by the header and resize it from the bottom-right corner.
        </BrDialogDescription>
      </BrDialogHeader>
      <div class="py-4">
        <p>Try moving me around!</p>
      </div>
    </BrDialogContent>
  </BrDialog>
</template>

    主题定制

    全局定制 (BrConfigProvider)

    你可以通过 BrConfigProvider 的 theme 属性覆盖默认 CSS 变量。

    <script setup lang="ts">
import { BrDialog, BrDialogTrigger, BrDialogContent, BrDialogHeader, BrDialogTitle, BrDialogDescription, BrButton, BrConfigProvider } from '@breezeui/vue'

const theme = {
  radius: '1rem',
  primary: '#10b981', // Emerald 500
  background: '#f0fdf4', // Emerald 50
  foreground: '#064e3b', // Emerald 900
}
</script>

<template>
  <BrConfigProvider :theme="theme">
    <BrDialog>
      <BrDialogTrigger as-child>
        <BrButton>Open Themed Dialog</BrButton>
      </BrDialogTrigger>
      <BrDialogContent>
        <BrDialogHeader>
          <BrDialogTitle>Themed Dialog</BrDialogTitle>
          <BrDialogDescription>
            This dialog inherits styles from BrConfigProvider.
          </BrDialogDescription>
        </BrDialogHeader>
        <div class="py-4">
          <p>Notice the custom colors and radius.</p>
        </div>
      </BrDialogContent>
    </BrDialog>
  </BrConfigProvider>
</template>

    API

    BrDialog

    属性名类型默认值说明
    openbooleanundefined对话框的受控打开状态。
    defaultOpenbooleanundefined对话框初始渲染时的打开状态。当不需要控制打开状态时使用。
    modalbooleantrue对话框的模态性。设置为 true 时，禁用与外部元素的交互（包括滚动锁定）。设置为 false 以保持页面可滚动。

    BrDialogContent

    属性名类型默认值说明
    classstringundefined应用于内容的附加类。
    showClosebooleantrue是否显示关闭按钮。
    fullscreenbooleanfalse是否以全屏模式渲染。
    draggablebooleanfalse对话框是否可拖拽（拖拽手柄为标题）。
    resizablebooleanfalse对话框是否可调整大小。

    BrDialogTrigger

    属性名类型默认值说明
    asChildbooleanfalse将默认渲染元素更改为作为子元素传递的元素，合并其属性和行为。

    BrDialogTitle

    属性名类型默认值说明
    asChildbooleanfalse将默认渲染元素更改为作为子元素传递的元素，合并其属性和行为。

    BrDialogDescription

    属性名类型默认值说明
    asChildbooleanfalse将默认渲染元素更改为作为子元素传递的元素，合并其属性和行为。