Light
Solid

AAlert

AAlert is an inline contextual banner for status messages. Pick a type (info, success, warn, danger) to drive its color and icon, add an optional title, and make it closable so users can dismiss it.

Import

import { Alert } from '@any-design/anyui/vue';
// React:  import { Alert } from '@any-design/anyui/react';
// Svelte: import { Alert } from '@any-design/anyui/svelte';

Basic usage

A default info banner with body content in the default slot.

<template>
  <AAlert>A new version is available — refresh to update.</AAlert>
</template>

Examples

Success with a title

Add title and switch type to success for positive feedback.

<template>
  <AAlert type="success" title="Payment received">
    Your receipt has been emailed to you.
  </AAlert>
</template>

Closable

Set closable to render a dismiss button; listen to close to react.

<template>
  <AAlert v-if="show" type="warn" closable @close="show = false">
    Your trial ends in 3 days.
  </AAlert>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(true);
</script>

Danger

Use type="danger" for errors or destructive warnings.

<template>
  <AAlert type="danger" title="Upload failed">
    The file exceeds the 10 MB limit. Please choose a smaller file.
  </AAlert>
</template>

Props

Prop Type Default Description
type ‘info’ | ‘success’ | ‘warn’ | ‘danger’ ‘info’ Status type, drives color and icon.
title String ‘’ Optional title.
closable Boolean false Show a close button.
showIcon Boolean true Show the type icon.

Events

Event Payload Description
close — Emitted when the close button is clicked.

Slots

Slot Props Description
default — Body content.
icon — Overrides the type icon.

AAlert

AAlert 是用于状态消息的内联横幅。通过 type（info、success、warn、danger）决定颜色与图标，可选地添加 title，并设置 closable 让用户可关闭。

引入

import { Alert } from '@any-design/anyui/vue';
// React:  import { Alert } from '@any-design/anyui/react';
// Svelte: import { Alert } from '@any-design/anyui/svelte';

基础用法

默认 info 类型，主体内容放在默认插槽。

<template>
  <AAlert>新版本已发布 —— 刷新即可更新。</AAlert>
</template>

示例

带标题的成功提示

添加 title 并将 type 设为 success，用于正面反馈。

<template>
  <AAlert type="success" title="支付成功">
    收据已发送至您的邮箱。
  </AAlert>
</template>

可关闭

设置 closable 显示关闭按钮；监听 close 事件响应关闭。

<template>
  <AAlert v-if="show" type="warn" closable @close="show = false">
    您的试用将在 3 天后到期。
  </AAlert>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(true);
</script>

危险提示

使用 type="danger" 表示错误或破坏性警告。

<template>
  <AAlert type="danger" title="上传失败">
    文件超过了 10 MB 限制，请选择更小的文件。
  </AAlert>
</template>

属性

属性 类型 默认值 说明
type ‘info’ | ‘success’ | ‘warn’ | ‘danger’ ‘info’ 状态类型，决定颜色与图标。
title String ‘’ 可选标题。
closable Boolean false 显示关闭按钮。
showIcon Boolean true 显示类型图标。

事件

事件 载荷 说明
close — 点击关闭按钮时触发。

插槽

插槽 作用域参数 说明
default — 主体内容。
icon — 覆盖类型图标。
Live preview · Vue
<!-- Demo 1 -->
<template>
  <AAlert>A new version is available — refresh to update.</AAlert>
</template>

<!-- Demo 2 -->
<template>
  <AAlert type="success" title="Payment received">
    Your receipt has been emailed to you.
  </AAlert>
</template>

<!-- Demo 3 -->
<template>
  <AAlert v-if="show" type="warn" closable @close="show = false">
    Your trial ends in 3 days.
  </AAlert>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(true);
</script>

<!-- Demo 4 -->
<template>
  <AAlert type="danger" title="Upload failed">
    The file exceeds the 10 MB limit. Please choose a smaller file.
  </AAlert>
</template>
Components组件参考