logo
简体中文

导航菜单

文档

AlertDialog

简介

AlertDialog 组件用于显示简单的确认对话框，支持国际化，带有淡入淡出动画效果。

组件特性：

  • 支持中英文国际化
  • 带有淡入淡出动画效果
  • 点击背景或按钮可关闭
  • 响应式设计，适配不同屏幕尺寸
  • 支持自定义对话框 ID
  • 使用 daisyUI 样式，与整体设计风格一致

案例

这是一个基础的确认对话框示例 

---
import { AlertDialog, Button } from '@coffic/cosy-ui';
---

<div style="padding: 1rem;">
  <Button onclick="showAlertDialog('basic-dialog')"> 显示确认对话框 </Button>

  <AlertDialog message="这是一个基础的确认对话框示例" id="basic-dialog" />
</div>

Props

class

自定义 CSS 类名，用于覆盖默认样式。

这是一个带有自定义样式的确认对话框 

---
import { AlertDialog, Button } from '@coffic/cosy-ui';
---

<div style="padding: 1rem;">
  <Button onclick="showAlertDialog('custom-dialog')"
    >显示自定义样式对话框</Button
  >

  <AlertDialog
    message="这是一个带有自定义样式的确认对话框"
    id="custom-dialog"
    class="cosy:bg-primary cosy:text-primary-content"
  />
</div>

id

对话框的唯一标识符，用于通过 JavaScript 控制对话框的显示和隐藏。

这是一个基础的确认对话框示例 

---
import { AlertDialog, Button } from '@coffic/cosy-ui';
---

<div style="padding: 1rem;">
  <Button onclick="showAlertDialog('basic-dialog')"> 显示确认对话框 </Button>

  <AlertDialog message="这是一个基础的确认对话框示例" id="basic-dialog" />
</div>

lang

语言设置，影响按钮文本，支持中文和英文两种语言。

This is an English confirmation dialog example 

---
import { AlertDialog, Button } from '@coffic/cosy-ui';
---

<div style="padding: 1rem;">
  <Button onclick="showAlertDialog('english-dialog')">
    Show English Dialog
  </Button>

  <AlertDialog
    message="This is an English confirmation dialog example"
    lang="en"
    id="english-dialog"
  />
</div>

message

对话框显示的消息内容，支持任意文本内容。

这是一个基础的确认对话框示例 

---
import { AlertDialog, Button } from '@coffic/cosy-ui';
---

<div style="padding: 1rem;">
  <Button onclick="showAlertDialog('basic-dialog')"> 显示确认对话框 </Button>

  <AlertDialog message="这是一个基础的确认对话框示例" id="basic-dialog" />
</div>

Slots

default

无插槽内容，所有内容通过 message 属性传递。

搜索