راهنمای انتخاب کامپوننت

راهنمای انتخاب کامپوننت

این صفحه به سوال «کدام کامپوننت؟» در تمام دسته‌بندی‌ها پاسخ می‌دهد.

ورودی‌ها

راهنمای تفصیلی ورودی‌ها

Input — برای هر نوع ورودی متن کوتاه و تک‌خطی. انواع type مفید: text، email، tel، number، password، search.

// ✅ مناسب
<Input type="email" placeholder="ایمیل خود را وارد کنید" />

// ❌ نامناسب — از Textarea استفاده کنید
<Input placeholder="توضیحات کامل پروژه..." />

Select در مقابل Autocomplete — اگر گزینه‌ها ثابت و کمتر از ۱۵ عدد هستند از Select، در غیر این صورت از Autocomplete با قابلیت جستجو استفاده کنید.

Checkbox در مقابل Switch:

Overlay و Modal

راهنمای تفصیلی Overlay ها

Dialog — برای محتوای مختصر و تعاملات کوتاه (فرم‌های ۱ تا ۳ فیلد، نمایش جزئیات). برای فرم طولانی یا محتوای اسکرول‌دار زیاد مناسب نیست — Sheet استفاده کنید.

Alert Dialog — فقط برای عملیاتی که غیرقابل بازگشت هستند (حذف داده، خروج از حساب). اگر عملیات قابل لغو است، Dialog معمولی کافی است.

Sheet — برای محتوای بیشتر که از کنار صفحه باز می‌شود (فرم‌های ۵+ فیلد، پنل تنظیمات، فیلترهای پیچیده). در موبایل Drawer بهتر است.

Drawer — نسخه موبایل‌پسند که از پایین صفحه باز می‌شود. مناسب برای اپلیکیشن‌های touch-first و اکشن‌شیت.

// Dialog — فرم کوتاه
<Dialog>
  <DialogContent>
    <DialogHeader><DialogTitle>ویرایش نام</DialogTitle></DialogHeader>
    <Input placeholder="نام جدید" />
    <DialogFooter><Button variant="primary">ذخیره</Button></DialogFooter>
  </DialogContent>
</Dialog>

// Alert Dialog — عملیات مخرب
<AlertDialog>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>حذف کاربر؟</AlertDialogTitle>
      <AlertDialogDescription>این عملیات قابل بازگشت نیست.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>انصراف</AlertDialogCancel>
      <AlertDialogAction>حذف</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Feedback و اعلان

راهنمای تفصیلی بازخورد

Toast (Sonner) — برای اعلان‌های موقت پس از انجام عملیات. برای اطلاعات مهمی که کاربر باید بخواند مناسب نیست.

import { toast } from 'sonner'

toast.success('تغییرات با موفقیت ذخیره شد')
toast.error('خطا در ارتباط با سرور')
toast('فایل حذف شد', {
  action: { label: 'بازگردانی', onClick: () => restoreFile() },
})

Alert — برای پیام‌های مهم که در صفحه می‌مانند (هشدار انقضای اشتراک، خطای کلی فرم). واریانت‌ها: default، destructive، warning، success.

Callout — فقط برای صفحات مستندات و راهنما، نه UI اپلیکیشن.

Badge — برای نمایش وضعیت یک آیتم (فعال، در انتظار)، نه برای پیام به کاربر.

نمایش داده

Layout و ساختار

ناوبری

بارگذاری

→ الگوهای کامل: الگوهای بارگذاری

نمودارها

→ راهنمای کامل: داده‌نمایی