Alert 警告提示

用于显示需要用户注意的信息。基于 BrConfigProvider 实现全局主题配置。

基础用法

Default Alert

This is a default alert.

Example

变体

使用 variant 属性控制警告提示的视觉风格。

• Default: 默认风格。
• Primary: 主色风格。
• Success: 成功色风格。
• Destructive: 破坏性（错误）色风格。
• Warning: 警告色风格。
• Info: 信息色风格。

Default

Default alert.

Primary

Primary alert.

Success

Success alert.

Destructive

Destructive alert.

Warning

Warning alert.

Info

Info alert.

Example

自定义内容 (可关闭)

通过组合式 API，你可以轻松添加自定义内容，例如关闭按钮。

Closable Alert

You can close this alert.

Example

自定义内容 (可折叠)

你可以利用 Vue 的标准特性构建复杂的交互，如可折叠的警告提示。

Collapsible Alert

Click the arrow to expand/collapse me.

Example

带图标

将图标作为 Alert 组件的第一个子元素即可。

With Icon

Alert with standard icon.

With Another Icon

Alert with another icon.

Example

主题定制

全局定制 (BrConfigProvider)

你可以通过 BrConfigProvider 的 theme 属性覆盖默认 CSS 变量。

Themed Default

Radius 1.5rem

Themed Primary

Violet primary color

Themed Destructive

Pink destructive color

Example

局部定制 (TailwindCSS)

你可以直接使用 TailwindCSS 工具类覆盖样式。

<template>
  <BrAlert class="bg-indigo-500 hover:bg-indigo-600">
    <BrAlertTitle>Custom Class</BrAlertTitle>
    <BrAlertDescription>Custom styled alert.</BrAlertDescription>
  </BrAlert>
</template>

API

组件

• BrAlert: 主容器。
• BrAlertTitle: 标题组件。
• BrAlertDescription: 描述组件。

BrAlert Props

属性名	类型	默认值	说明
variant	string	'default'	视觉风格变体: default, primary, success, destructive, warning, info
class	string	undefined	自定义类名