logo
English

导航菜单

Documents

AlertDialog

Introduction

The AlertDialog component is used to display simple confirmation dialogs with internationalization support and fade-in/fade-out animation effects.

Component Features:

  • Supports Chinese and English internationalization
  • Features fade-in/fade-out animation effects
  • Can be closed by clicking the background or button
  • Responsive design that adapts to different screen sizes
  • Supports custom dialog ID
  • Uses daisyUI styling for consistent design

Example

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

---
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

Custom CSS class name for overriding default styles.

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

---
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

Unique identifier for the dialog, used to control the dialog’s show and hide behavior through 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

Language setting that affects button text, supporting both Chinese and English languages.

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

The message content displayed in the dialog, supporting any text content.

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

---
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

No slot content, all content is passed through the message property.

搜索