Ecme logoEcme logo
داشبورد
    فروشگاه آنلاین
    پروژه
    بازاریابی
    تحلیل
مفاهیم
    هوش مصنوعی
      گفتگو
      تصویر
    پروژه‌ها
      تابلوی اسکرام
      فهرست
      جزئیات
      وظایف
      مسائل
    مشتریان
      فهرست
      ویرایش
      ایجاد
      جزئیات
    محصولات
      فهرست
      ویرایش
      ایجاد
    سفارش‌ها
      فهرست
      ویرایش
      ایجاد
      جزئیات
    حساب کاربری
      تنظیمات
      سابقه فعالیت
      نقش‌ها و دسترسی‌ها
      تعرفه‌ها
    مرکز راهنمایی
      مرکز پشتیبانی
      مقاله
      ویرایش مقاله
      مدیریت مقاله
    تقویم
    مدیریت فایل
    ایمیل
    گفتگو
اجزای رابط کاربری
    عمومی
      دکمه
      شبکه
      تایپوگرافی
      نمادها
    بازخورد
      هشدار
      پنجره گفتگو
      منوی کشویی
      نوار پیشرفت
      پیش‌نمایش
      نشانگر بارگذاری
      پیام موقت
    نمایش اطلاعات
      تصویر کاربر
      نشانک
      تقویم
      کارت‌ها
      جدول
      برچسب
      خط زمان
      راهنمای ابزار
    فرم‌ها
      کادر انتخاب
      انتخابگر تاریخ
      کنترل‌های فرم
      ورودی
      گروه ورودی
      دکمه رادیویی
      بخش
      انتخابگر
      کلید دوحالته
      ورودی زمان
      بارگذاری
    ناوبری
      منوی کشویی
      منو
      صفحه‌بندی
      گام‌ها
      زبانه‌ها
    نمودار
      نمودارها
      نقشه‌ها
احراز هویت
    ورود به سیستم
      ساده
      کناری
      دوبخشی
    ثبت‌نام
      ساده
      کناری
      دوبخشی
    بازیابی رمز عبور
      ساده
      کناری
      دوبخشی
    بازنشانی رمز عبور
      ساده
      کناری
      دوبخشی
    تایید رمز یکبار مصرف
      ساده
      کناری
      دوبخشی
سایر
    دسترسی غیرمجاز
    صفحه فرود
راهنما
    مستندات
    اجزای اشتراکی
    ابزارها
    تاریخچه تغییرات
حق نشر © 2026 Ecme تمامی حقوق محفوظ است.
شرایط و ضوابط | حریم خصوصی و سیاست

کشویی (Dropdown)

کشویی به کاربران این امکان را می‌دهد که یک آیتم را از فهرستی از گزینه‌ها انتخاب کنند.

پیش‌فرض (Default)

استفاده پیش‌فرض از کشویی.
کلیک کن!

دکمه سفارشی (Custom Toggle)

ما می‌توانیم با استفاده از پراپ renderTitle، دکمه سفارشی برای کشویی تنظیم کنیم.

توسعه‌دهنده (Trigger)

کشویی به ما این امکان را می‌دهد که حالت trigger را به click، hover یا context تنظیم کنیم.
کلیک کنید
هاور
کلیک راست

زیرمنو (Submenu)

کشویی می‌تواند سطوح چندگانه داشته باشد.
کلیک کنید!

قرارگیری (Placement)

قرارگیری منوی کشویی می‌تواند با استفاده از پراپ placement در اطراف عنصر توسعه‌دهنده در موقعیت‌های مختلف تنظیم شود.
بالا-چپ
بالا-مرکز
بالا-راست
پایین-چپ
پایین-مرکز
پایین-راست
راست-چپ
راست-مرکز
راست-راست
چپ-چپ
چپ-مرکز
چپ-راست

پیش‌فرض فعال (Default Active)

مقدار eventKey برای Dropdown.Item را به پراپ activeKey تنظیم کنید تا وضعیت فعال Dropdown.Item را مشخص کنید.
کلیک کن!
کلیک کن!

غیرفعال (Disabled)

پراپ disabled می‌تواند هم در Dropdown و هم در Dropdown.Item برای غیرفعال کردن اقدامات کاربر استفاده شود.
کلیک کن!
کلیک کن!

نوع آیتم کشویی (Dropdown Item Type)

Dropdown.Item چندین نوع متغیر دارد که می‌توان اعمال کرد، پراپ variant را ارسال کرده و یکی از گزینه‌های 'default'، 'header'، 'divider'، 'default' را استفاده کنید.
کلیک کن!

با RouterLink (With RouterLink)

استفاده با RouterLink.
کلیک کنید!

API

کشویی (Dropdown)
ویژگیتوضیحاتنوعپیش‌فرض
titleعنوان کشوییstring-
renderTitleعنوان سفارشی کشوییReactNode-
triggerحالت فعال‌سازی کشویی'click' | 'hover' | 'context' 'click'
placementموقعیتی که منوی کشویی در آن باز می‌شود'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'middle-start-top'| 'middle-start-bottom' | 'middle-end-top'| 'middle-end-bottom''bottom-start'
menuClassکلاس اضافی برای منوی کشویی (! برای اصلاحات tailwind css توصیه می‌شود)string-
menuStyleسبک‌های اضافی برای منوی کشوییobject-
toggleClassNameکلاس اضافی برای دکمه کشویی (! برای اصلاحات tailwind css توصیه می‌شود)string-
disabledآیا کشویی غیرفعال باشدboolean-
activeKeyآیتم مربوط به Dropdown.Item را با مطابقت دادن آن با پراپ eventkey به عنوان فعال مشخص کنیدstring-
onClickفراخوانی هنگام کلیک بر روی دکمه کشویی(e: MouseEvent) => void-
onMouseEnterفراخوانی هنگام قرار گرفتن موس روی دکمه کشویی(e: MouseEvent) => void-
onMouseLeaveفراخوانی هنگام خارج شدن موس از دکمه کشویی(e: MouseEvent) => void-
onContextMenuفراخوانی هنگام کلیک راست روی دکمه کشویی(e: MouseEvent) => void-
onSelectفراخوانی هنگام کلیک بر روی آیتم کشویی(e: MouseEvent) => void-
onOpenفراخوانی هنگام باز شدن کشویی() => void-
onCloseفراخوانی هنگام بسته شدن کشویی() => void-
onToggleفراخوانی هنگام باز یا بسته شدن کشویی(open: boolean) => void-
آیتم کشویی (Dropdown.Item)
ویژگیتوضیحاتنوعپیش‌فرض
activeآیا آیتم کشویی جاری فعال استboolean-
disabledآیا آیتم کشویی جاری غیرفعال استboolean-
variantنوع آیتم کشویی را تعریف کنید'default' | 'header' | 'divider' | 'custom'-
eventKeyمقدار آیتم کشوییstring-
onClickفراخوانی هنگام کلیک بر روی آیتم کشویی() => void-
onSelectفراخوانی هنگام کلیک بر روی آیتم کشویی(eventKey: string, e: MouseEvent) => void-
منوی کشویی (Dropdown.Menu)
ویژگیتوضیحاتنوعپیش‌فرض
titleعنوان برای زیرمنوstring | ReactNode-
eventKeyمقدار زیرمنوی کشوییstring-
placementموقعیتی که منوی کشویی در آن باز می‌شود'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'middle-start-top'| 'middle-start-bottom' | 'middle-end-top'| 'middle-end-bottom'-
فهرست مطالب
  • پیش‌فرض (Default)
  • دکمه سفارشی (Custom Toggle)
  • توسعه‌دهنده (Trigger)
  • زیرمنو (Submenu)
  • قرارگیری (Placement)
  • پیش‌فرض فعال (Default Active)
  • غیرفعال (Disabled)
  • نوع آیتم کشویی (Dropdown Item Type)
  • با RouterLink (With RouterLink)