logo
简体中文

导航菜单

文档

Alert

简介

Alert 组件用于向用户显示重要的提示信息，支持多种类型的提示样式和交互效果。

组件特性：

  • 支持四种预设类型，每种类型有对应的图标和颜色
  • 可添加标题使提示更醒目
  • 支持自定义 class 覆盖默认样式
  • 响应式设计，适配不同屏幕尺寸
  • 可控制是否显示图标
  • 支持设置垂直方向外边距
  • 支持多种样式变体

案例

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

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>

Props

class

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

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

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

<Alert type="info" class="custom-alert"> 这是一个自定义样式的提示框 </Alert>

<style>
  .custom-alert {
    background-color: #f3e8ff;
    color: #581c87;
    border: 1px solid #c084fc;
  }
</style>

closable

是否可关闭，设置为 false 时隐藏关闭按钮。

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

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>

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

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

description

描述文本，显示在标题下方，字体较小且透明度降低。

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

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

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

marginY

垂直方向外边距大小，支持预设的尺寸值。

---
/**
 * @component EAlertMarginYXs
 * @description 展示 Alert 组件的超小垂直外边距功能。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" marginY="xs"> 超小间距的提示信息 </Alert>

---
/**
 * @component EAlertMarginYSm
 * @description 展示 Alert 组件的垂直外边距功能。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="success" marginY="sm"> 小间距的成功提示 </Alert>

---
/**
 * @component EAlertMarginYMd
 * @description 展示 Alert 组件的中等垂直外边距功能。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="warning" marginY="md"> 中等间距的警告提示 </Alert>

---
/**
 * @component EAlertMarginYLg
 * @description 展示 Alert 组件的大垂直外边距功能。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="error" marginY="lg"> 大间距的错误提示 </Alert>

---
/**
 * @component EAlertMarginYXl
 * @description 展示 Alert 组件的超大垂直外边距功能。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" marginY="xl"> 超大间距的信息提示 </Alert>

showIcon

是否显示图标，设置为 false 时隐藏类型对应的图标。

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

<Alert type="info" showIcon={false}> 这是一个不显示图标的信息提示 </Alert>


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

<Alert type="success" showIcon={false}> 这是一个不显示图标的成功提示 </Alert>


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

<Alert type="warning" showIcon={false}> 这是一个不显示图标的警告提示 </Alert>


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

<Alert type="error" showIcon={false}> 这是一个不显示图标的错误提示 </Alert>

title

提示标题，可选，显示为粗体文本。

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

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

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

type

提示类型，影响颜色和图标，支持 info、success、warning、error 四种类型。

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

variant

样式变体，支持 solid（实心）、outline（描边）、dash（虚线）、soft（柔和）四种风格。

---
/**
 * @component AlertOutlineInfo
 * @description Alert 组件 info 类型 outline 描边风格示例。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" variant="outline" title="Info Outline 风格">
  这是 Info 类型的 Outline 描边风格提示
</Alert>

---
/**
 * @component AlertOutlineSuccess
 * @description Alert 组件 success 类型 outline 描边风格示例。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="success" variant="outline" title="Success Outline 风格">
  这是 Success 类型的 Outline 描边风格提示
</Alert>


---
/**
 * @component AlertOutlineWarning
 * @description Alert 组件 warning 类型 outline 描边风格示例。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="warning" variant="outline" title="Warning Outline 风格">
  这是 Warning 类型的 Outline 描边风格提示
</Alert>


---
/**
 * @component AlertOutlineError
 * @description Alert 组件 error 类型 outline 描边风格示例。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="error" variant="outline" title="Error Outline 风格">
  这是 Error 类型的 Outline 描边风格提示
</Alert>

基础用法

最简单的提示信息展示：

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

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>

自定义操作按钮

通过 action slot 可以在 Alert 右侧自定义操作按钮：

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

<Alert type="info" title="自定义操作">
  你可以通过 action slot 在右侧自定义按钮。
  <div slot="action">
    <button
      style="
        background-color: #3b82f6;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        cursor: pointer;
        font-size: 0.875rem;
      "
      onclick="alert('自定义操作')">
      自定义操作
    </button>
  </div>
</Alert>

该 slot 渲染在 Alert 右侧，适合放置自定义按钮或其他操作。

搜索