Sonner 轻量通知

用于轻量通知场景的 MoriUI 组件。

导入

import { Sonner, toast } from 'moriui'

示例

概览

触发 toast 通知。

<script setup lang="ts">
  import { Button, Sonner, toast } from 'moriui'
</script>

<template>
  <Sonner />
  <Button
    variant="outline"
    size="sm"
    @click="toast('事件已创建', {
      description: '2023 年 12 月 3 日星期日上午 9:00',
      action: {
        label: '撤销',
        onClick: () => console.log('撤销'),
      },
    })"
  >
    显示通知
  </Button>
</template>

类型

不同风格的通知。

<script setup lang="ts">
  import { Button, Sonner, toast } from 'moriui'
</script>

<template>
  <Sonner />
  <div class="flex flex-wrap gap-2">
    <Button variant="outline" size="sm" @click="toast('默认通知')">
      默认
    </Button>
    <Button variant="outline" size="sm" @click="toast.success('操作成功')">
      成功
    </Button>
    <Button variant="outline" size="sm" @click="toast.info('请在活动开始前 10 分钟到达现场')">
      信息
    </Button>
    <Button variant="outline" size="sm" @click="toast.warning('活动开始时间不能早于上午 8 点')">
      警告
    </Button>
    <Button variant="outline" size="sm" @click="toast.error('操作失败')">
      错误
    </Button>
    <Button
      variant="outline"
      size="sm"
      @click="toast.promise<{ name: string }>(
        () => new Promise(resolve => setTimeout(() => resolve({ name: '活动' }), 2000)),
        {
          loading: '加载中…',
          success: data => `${data.name}已创建`,
          error: '创建失败',
        },
      )"
    >
      异步
    </Button>
  </div>
</template>

描述

带描述和操作的通知。

<script setup lang="ts">
  import { Button, Sonner, toast } from 'moriui'
</script>

<template>
  <Sonner />
  <div class="flex flex-wrap gap-2">
    <Button
      variant="outline"
      size="sm"
      @click="toast('事件已创建', {
        description: '2023 年 1 月 3 日星期一下午 6:00',
      })"
    >
      仅描述
    </Button>
    <Button
      variant="outline"
      size="sm"
      @click="toast('文件已上传', {
        description: '报告文档已保存到项目文件夹',
        action: {
          label: '打开',
          onClick: () => console.log('打开文件'),
        },
      })"
    >
      带操作按钮
    </Button>
  </div>
</template>

位置

通知出现位置。

<script setup lang="ts">
  import { Button, Sonner, toast } from 'moriui'
</script>

<template>
  <Sonner />
  <div class="flex flex-wrap justify-center gap-2">
    <Button variant="outline" size="sm" @click="toast('事件已创建', { position: 'top-left' })">
      左上
    </Button>
    <Button variant="outline" size="sm" @click="toast('事件已创建', { position: 'top-center' })">
      顶部居中
    </Button>
    <Button variant="outline" size="sm" @click="toast('事件已创建', { position: 'top-right' })">
      右上
    </Button>
    <Button variant="outline" size="sm" @click="toast('事件已创建', { position: 'bottom-left' })">
      左下
    </Button>
    <Button variant="outline" size="sm" @click="toast('事件已创建', { position: 'bottom-center' })">
      底部居中
    </Button>
    <Button variant="outline" size="sm" @click="toast('事件已创建', { position: 'bottom-right' })">
      右下
    </Button>
  </div>
</template>

使用说明

使用方式

安装 Sonner 到应用根节点，通过 toast API 触发通知。

类型

toast API 支持 default/success/error/info/warning 类型。

位置

position 控制通知的出现位置（如 top-right、bottom-center）。

RTL

通知内容沿 dir 排列。

变体

Sonner 的 position 支持 top-left/top-center/top-right/bottom-left/bottom-center/bottom-right。

可访问性

Sonner 使用 role="status" 和 aria-live="polite" 确保通知被屏幕阅读器朗读。可交互的通知应包含操作按钮。

API 参考

属性	类型	默认值	说明
`Sonner position`	`SonnerPosition`	`'bottom-right'`	通知出现位置。
`Sonner duration`	`number`	`4000`	通知显示的毫秒数。
`Sonner closeButton`	`boolean`	`false`	是否显示关闭按钮。
`Sonner richColors`	`boolean`	`false`	是否使用丰富的颜色方案。
`toast()`	`(message: string) => string`	`—`	触发默认通知。
`toast.success()`	`(message: string) => string`	`—`	触发成功通知。
`toast.error()`	`(message: string) => string`	`—`	触发错误通知。
`toast.info()`	`(message: string) => string`	`—`	触发信息通知。
`toast.warning()`	`(message: string) => string`	`—`	触发警告通知。