Toast

NEW

一時的な通知やフィードバックを表示するトーストコンポーネント

Interactive Demo

ボタンをクリックしてトーストを表示

Click the button above to see toast examples

Features

トーストの特徴

Auto Dismiss

4秒後に自動的に消えます

Smooth Animation

スライドイン・アウトアニメーション

4 Variants

default, success, error, warning

Dismissible

閉じるボタンで即座に削除可能

Usage

コンポーネントの使用例

tsx

class="token keyword">import { Toast } class="token keyword">from class="token keyword">class="token string">"@/components/ui";
class="token keyword">import { useSignal } class="token keyword">from class="token keyword">class="token string">"@builder.io/qwik";

class="token keyword">const showToast = class="token function">useSignal(class="token keyword">false);

class="token keyword">class=class="token keyword">class="token string">"token comment">// Show toast
showToast.value = class="token keyword">true;

class="token keyword">class=class="token keyword">class="token string">"token comment">// In your JSX
{showToast.value && (
  <class="token tag">Toast
    message=class="token keyword">class="token string">"Operation successful!"
    variant=class="token keyword">class="token string">"success"
    duration={class="token number">4000}
    onClose$={() => showToast.value = class="token keyword">false}
  />
)}

class="token keyword">class=class="token keyword">class="token string">"token comment">// Variants
<class="token tag">Toast variant=class="token keyword">class="token string">"class="token keyword">default" message=class="token keyword">class="token string">"Info" />
<class="token tag">Toast variant=class="token keyword">class="token string">"success" message=class="token keyword">class="token string">"Success!" />
<class="token tag">Toast variant=class="token keyword">class="token string">"error" message=class="token keyword">class="token string">"Error occurred" />
<class="token tag">Toast variant=class="token keyword">class="token string">"warning" message=class="token keyword">class="token string">"Warning!" />

Props

コンポーネントのプロパティ

Prop	Type	Default	Description
message	string	-	表示するメッセージ
variant	"default" \| "success" \| "error" \| "warning"	"default"	トーストのスタイル
duration	number	4000	表示時間（ミリ秒）
onClose$	QRL<() => void>	-	閉じた時のコールバック