トースト

トースト通知。トーストマネージャーを通じてどこからでも呼び出せます。Toaster を 1 つレンダリングしてください（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（ms、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）は表示位置ごとに表示するトーストの数を制限します。AppLayout を使わない場合は、<Toaster/> / <ThlToaster/> / <thl-toaster/> を一度だけレンダリングしてください。

API

Toaster

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

Prop	型	デフォルト