AToast

toast is a stackable corner-notification API, with AToast as its declarative component. The imperative toast helpers (toast.info / .success / .warning / .error) are the common entry point — they accept title, content, duration, and placement, and stack multiple toasts in the chosen corner.

Import

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

Basic usage

Call toast.success imperatively with a title and content.

<template>
  <AButton type="primary" @click="save">Save</AButton>
</template>

<script setup>
import { toast } from '@any-design/anyui/vue';
const save = () => {
  toast.success({ title: 'Saved', content: 'Your changes are live.' });
};
</script>

Examples

Placement and duration

Control where the toast appears with placement (top-right | bottom-right) and how long it stays with duration.

<template>
  <AButton @click="notify">Notify</AButton>
</template>

<script setup>
import { toast } from '@any-design/anyui/vue';
const notify = () => {
  toast.info({
    title: 'Sync started',
    content: 'Uploading 12 files…',
    placement: 'bottom-right',
    duration: 4000,
  });
};
</script>

Stacked notifications

Each call stacks independently — fire several to confirm a batch of actions.

<template>
  <AButton @click="batch">Run batch</AButton>
</template>

<script setup>
import { toast } from '@any-design/anyui/vue';
const batch = () => {
  toast.success({ title: 'Export ready', content: 'report.csv downloaded.' });
  toast.warning({ title: '2 items skipped', content: 'See the log for details.' });
};
</script>

Props

Prop	Type	Default	Description
type	‘info’ | ‘success’ | ‘warning’ | ‘error’	‘info’	Status type.
title	String	‘’	Toast title.
content	String	‘’	Toast body.
closable	Boolean	true	Show close button.

Events

Event	Payload	Description
close	—	On close.

Methods

Method	Signature	Description
toast.info / .success / .warning / .error	(options) => void	Imperative helpers; options also accept duration, placement (top-right

Notes

Global install also exposes $toast. placement and duration only apply to the imperative API.

AToast

toast 是可堆叠的角落通知 API，AToast 是其声明式组件。常用的入口是命令式辅助方法（toast.info / .success / .warning / .error），它们接受 title、content、duration 与 placement，并在所选角落堆叠多个通知。

引入

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

基础用法

命令式调用 toast.success，传入标题与正文。

<template>
  <AButton type="primary" @click="save">保存</AButton>
</template>

<script setup>
import { toast } from '@any-design/anyui/vue';
const save = () => {
  toast.success({ title: '已保存', content: '你的修改已生效。' });
};
</script>

示例

位置与时长

用 placement（top-right | bottom-right）控制通知出现的位置，用 duration 控制停留时长。

<template>
  <AButton @click="notify">提醒</AButton>
</template>

<script setup>
import { toast } from '@any-design/anyui/vue';
const notify = () => {
  toast.info({
    title: '同步已开始',
    content: '正在上传 12 个文件…',
    placement: 'bottom-right',
    duration: 4000,
  });
};
</script>

堆叠通知

每次调用都会独立堆叠 —— 可连续触发多条以确认一批操作。

<template>
  <AButton @click="batch">执行批处理</AButton>
</template>

<script setup>
import { toast } from '@any-design/anyui/vue';
const batch = () => {
  toast.success({ title: '导出完成', content: 'report.csv 已下载。' });
  toast.warning({ title: '2 项已跳过', content: '详情请查看日志。' });
};
</script>

属性

属性	类型	默认值	说明
type	‘info’ | ‘success’ | ‘warning’ | ‘error’	‘info’	状态类型。
title	String	‘’	标题。
content	String	‘’	正文。
closable	Boolean	true	显示关闭按钮。

事件

事件	载荷	说明
close	—	关闭时触发。

方法

方法	签名	说明
toast.info / .success / .warning / .error	(options) => void	命令式调用；options 还支持 duration、placement（top-right

说明

全局安装还会挂载 $toast。placement 与 duration 仅作用于命令式 API。