これは何か

操作の結果を、右下にリキッドガラスの通知で返すトーストです。色のついた丸アイコン、見出し、短い本文が並び、新しい通知はスプリングで入ります。横にスワイプすると閉じます。成功、エラー、読み込みがあり、読み込み中のカードは同じカードのまま成功に変わります。背景は白です。

操作の入り口をコマンドパレットにするなら：スプリング・コマンドパレット

プロパティ	型	初期値	説明
position	"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"	"bottom-right"	スタックを置く角。新しいトーストはその端から入ります。
duration	number	4800	成功とエラーが自動で消えるまでのミリ秒。読み込み中は、種類が変わるまで消えません。
maxVisible	number	3	画面に残す枚数。それより古い通知は、見えているものが閉じてから出ます。
onDismiss	(id: string) => void	—	スワイプ、閉じるボタン、時間切れ、dismiss() のあと、トーストの id を渡して呼ばれます。
closeLabel	string	Dismiss notification	閉じるボタンのアクセシブルな名前。
regionLabel	string	Notifications	スタック領域のアクセシブルな名前。
toast()	(options) => string	—	トーストを追加して id を返します。タイトル文字列か、{ title, description?, tone?, duration?, id?, actionLabel?, onAction? } を渡します。tone は success、error、loading です。
useToast()	{ toast, update, dismiss }	—	追加に加えて update(id, patch) と dismiss(id) があります。同じ id の update で、読み込み中のカードを新しいカードにせず成功へ変えます。

ほかのコンポーネント

コンポーネント無料サンプル

無料: コンポーネント月5回・動画プロンプト月1回 · 無制限は30日パスと Lifetime

バージョン 1.0.0