Toast

نصب

pnpm dlx @simurgh-ui/cli add toast

import { ToastProvider, useToast, ToastViewport, ToastMessage } from '@simurgh-ui/react/toast';
import { ToastProvider as VueToastProvider, useToast as useVueToast, ToastViewport as VueToastViewport } from '@simurgh-ui/vue/toast';
import { ToastViewportComponent } from '@simurgh-ui/angular/toast';
import '@simurgh-ui/styles/toast.css';

پیش‌نمایش واقعی

Live component Toast ◆

Save changes

استفاده

React

const { toast } = useToast();
toast({ title: 'ذخیره شد', description: 'تغییرهای شما منتشر شدند.' });
// ToastViewport را داخل ToastProvider رندر کنید.

Vue

const { toast } = useToast();
toast({ title: 'ذخیره شد', description: 'تغییرهای شما منتشر شدند.' });
// ToastViewport را داخل ToastProvider رندر کنید.

Angular

@ViewChild(ToastViewportComponent) toasts!: ToastViewportComponent;
this.toasts.toast({ title: 'ذخیره شد', description: 'تغییرهای شما منتشر شدند.' });

فراهم‌کننده صف پیام‌ها را نگه می‌دارد و viewport آن‌ها را به‌صورت status مؤدبانه اعلام می‌کند. پیام را کوتاه نگه دارید و برای هر toast دکمهٔ بستن با نام روشن فراهم کنید. اگر کاربر باید پیش از ادامه پاسخ دهد، dialog یا خطای درون‌صفحه‌ای مناسب‌تر است.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.