logo
English
导航

Alert

Introduction

The Alert component is used to display important alert messages to users, supporting various types (info/success/warning/error) and custom styles.

Component features:

  • Supports four preset types, each with corresponding icons and colors
  • Can add titles to make alerts more prominent
  • Supports custom classes to override default styles
  • Responsive design, adapts to different screen sizes

Basic Usage

The simplest way to display alert messages:

---
/**
 * @component EAlertBasic
 * @description The basic usage of Alert component.
 */
import { Alert } from '@coffic/cosy-ui';

const handleClose = () => {
  console.log('Alert closed!');
};
---

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>
<script define:vars={{ handleClose }}>
  // 实际的关闭事件由组件内部处理，这里只是为了演示
</script>

Alert with Title

Add a title using the title property:

---
/**
 * @component Alert.WithTitle
 *
 * @description
 * 带标题的Alert组件示例，展示如何使用title属性添加标题。
 */

import { Alert } from '@coffic/cosy-ui';
---

<Alert type="success" title="操作成功">您的操作已成功完成</Alert>

Alert Types

The Alert component supports four preset types:

---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info">这是一条信息提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="success">这是一条成功提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="warning">这是一条警告提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="error">这是一条错误提示</Alert>

Custom Styles

Customize alert box styles using the class property:

---
/**
 * @component Alert.CustomStyle
 *
 * @description
 * 展示如何使用class属性自定义Alert组件的样式。
 */

import { Alert } from '@coffic/cosy-ui';
---

<Alert
  type="info"
  class="cosy:bg-purple-100 cosy:text-purple-800 cosy:border-purple-300">
  这是一个自定义样式的提示框
</Alert>

Closable Alert

You can control whether an alert is closable using the closable prop. It defaults to true.

---
/**
 * @component EAlertBasic
 * @description The basic usage of Alert component.
 */
import { Alert } from '@coffic/cosy-ui';

const handleClose = () => {
  console.log('Alert closed!');
};
---

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>
<script define:vars={{ handleClose }}>
  // 实际的关闭事件由组件内部处理，这里只是为了演示
</script>

---
/**
 * @component EAlertNotClosable
 * @description An example of a non-closable Alert.
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="warning" closable={false}> 这是一条不可关闭的警告提示 </Alert>

Custom Action Button

You can use the action slot to add a custom action button on the right side of the Alert:

---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" title="自定义操作">
  你可以通过 action slot 在右侧自定义按钮。
  <div slot="action">
    <button class="cosy:btn cosy:btn-primary" onclick="alert('自定义操作')"
      >自定义操作</button
    >
  </div>
</Alert>

This slot is rendered on the right side of the Alert, suitable for custom buttons or other actions.

Vue Component

This component also supports Vue, with the following usage:

 
<template>
  <Alert type="info" closable @close="handleClose">这是一条信息提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';

const handleClose = () => {
  alert('close');
};
</script>

<template>
  <Alert type="success" title="操作成功">您的操作已成功完成</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>

<template>
  <div class="cosy:flex cosy:flex-col cosy:gap-4">
    <Alert type="info" title="提示">这是一条信息提示</Alert>
    <Alert type="success" title="成功">操作已成功完成</Alert>
    <Alert type="warning" title="警告">这是一个警告提示</Alert>
    <Alert type="error" title="错误">发生了一个错误</Alert>
  </div>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>

<template>
  <Alert
    type="info"
    title="自定义样式"
    class="cosy:border-2 cosy:border-blue-500 cosy:shadow-lg"
  >
    通过 class 属性可以自定义 Alert 的样式
  </Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Alert type="info" title="自定义操作">
        你可以通过 action slot 在右侧自定义按钮。
        <template #action>
            <button class="cosy:btn cosy:btn-primary" @click="handleAction">
                自定义操作
            </button>
        </template>
    </Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';

const handleAction = () => {
    alert('自定义操作');
};
</script>