Toast

Thông báo toast. Gọi từ bất kỳ đâu qua toast manager; chỉ cần render một Toaster (đã có sẵn trong AppLayout).

Loại & vị trí

Loại & vị trí

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' });

Tuỳ chọn

Tuỳ chọn	Kiểu	Mặc định
message	string	—
title	string	—
type	'success' | 'info' | 'warning' | 'error' | 'default'	'default'
duration	number (ms, 0 = không tự đóng)	components.Toast.duration (3500)
position	top-right · top-left · bottom-right · bottom-left · top-center · bottom-center	components.Toast.position
icon	tên icon	theo loại
closable	boolean	true

max (mặc định 5) giới hạn số toast hiển thị ở mỗi vị trí. Nếu không dùng AppLayout, hãy render <Toaster/> / <ThlToaster/> / <thl-toaster/> một lần.

API

Toaster

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

Prop	Kiểu	Mặc định