کشویی (Dropdown)

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

پیش‌فرض (Default)

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

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

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

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

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

قرارگیری (Placement)

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

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

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

غیرفعال (Disabled)

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

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'-