Alert

提供关于操作或事件的简洁反馈的临时通知

安装

npm

npm add @heroui-vue/alert

pnpm

pnpm add @heroui-vue/alert

yarn

yarn add @heroui-vue/alert

bun

bun add @heroui-vue/alert

NOTE

如果你使用全局安装的方式，可忽略此安装步骤

导入

按需导入

import { Alert } from '@heroui-vue/alert'

全局导入

import { Alert } from 'heroui-vue'

使用

预览源代码

This is an alert

Thanks for subscribing to our newsletter!

颜色

Alert有6种颜色变体，用以传达不同的含义。

预览源代码

This is a default alert

This is a primary alert

This is a secondary alert

This is a success alert

This is a warning alert

This is a danger alert

变体

预览源代码

This is a solid alert

This is a bordered alert

This is a flat alert

This is a faded alert

自定义图标

默认情况下，Alert 组件会根据color属性显示相应的图标。你可以通过使用icon插槽提供自定义图标来覆盖这一行为。

预览源代码

An alert with a custom icon

不带图标

您可以通过将 hideIcon 属性设置为 true 来隐藏图标。

预览源代码

This is an alert

Thanks for subscribing to our newsletter!

不带图标容器

您可以通过将 hideIconWrapper 属性设置为 true 来隐藏图标容器。

预览源代码

Bordered Alert

This is a bordered variant alert