消息通知

Toast 通知。可在任意位置通过 toast manager 调用；只需渲染一个 Toaster（AppLayout 中已包含）。

类型与位置

类型与位置

Vue

<div>
  <div class="thl-demo-row"><ThlButton variant="success" @click="toast.success('Saved successfully')">success</ThlButton><ThlButton variant="info" @click="toast.info('FYI', { title: 'Info' })">info</ThlButton><ThlButton variant="warning" @click="toast.warning('Careful')">warning</ThlButton><ThlButton variant="danger" @click="toast.error('Failed', { duration: 0 })">error (sticky)</ThlButton></div>
  <div class="thl-demo-row"><ThlButton v-for="p in positions" :key="p" size="sm" outline variant="primary" @click="toast.show({ message: p, position: p })">{{ p }}</ThlButton></div>
</div>

React

import { useToast } from '@thl-ui/react';
const toast = useToast();
toast.success('Saved successfully');
toast.info('FYI', { title: 'Info' });
toast.error('Failed', { duration: 0 });           // sticky
toast.show({ message: 'Hi', position: 'bottom-left', icon: 'bell' });

Angular

import { ThlToastService } from '@thl-ui/angular';
readonly toast = inject(ThlToastService);
this.toast.success('Saved successfully');
this.toast.error('Failed', { duration: 0 });
this.toast.show({ message: 'Hi', position: 'bottom-left' });

选项

选项	类型	默认值
message	string	—
title	string	—
type	'success' | 'info' | 'warning' | 'error' | 'default'	'default'
duration	number（毫秒，0 = 不自动关闭）	components.Toast.duration（3500）
position	top-right · top-left · bottom-right · bottom-left · top-center · bottom-center	components.Toast.position
icon	图标名称	随类型而定
closable	boolean	true

max（默认 5）限制每个位置可见的 toast 数量。不使用 AppLayout 时，请渲染一次 <Toaster/> / <ThlToaster/> / <thl-toaster/>。

API

Toaster

<ThlToaster> · import { ThlToaster } from '@thl-ui/vue'

Prop	类型	默认值