تم تاریک
دراپداون Dropdown
کامپوننت Dropdown به کاربران این امکان را میدهد تا از میان چندین گزینه در یک فهرست کشویی، یک یا چند مورد را انتخاب کنند. این المان برای صرفهجویی در فضای رابط کاربری و دستهبندی انتخابهای مرتبط بسیار کاربردی است.
نمونه زنده
آناتومی
- آیکون (Icon): جهت کمک به تشخیص بصری نوع محتوا در کنار متن قرار میگیرد.
- متن جایگزین (Placeholder): متنی کوتاه و تکخطی که تا پیش از انتخاب گزینه، نقش راهنما را دارد.
- آیکون جهتنما (Chevron Icon): نشاندهنده وضعیت باز یا بسته بودن و جهت باز شدن منو.
انواع (حالتهای نمایش)
دراپداون بر اساس نحوه نمایش انتخابها به دو نوع اصلی تقسیم میشود:
| نوع | کاربرد | تصویر |
|---|---|---|
| Normal | مناسب برای انتخابهای ساده (تکانتخابی یا چندانتخابی). |  |
| Tag | نمایش انتخابها به صورت تگ. حداکثر ۳ تگ نمایش داده شده و مابقی به صورت عددی (مثلاً +۲ مورد دیگر) درج میشوند. |  |
وضعیتها
ظاهر دراپداون بسته به نوع تعامل کاربر تغییر میکند:
- Default: حالت آماده به کار.
- Hover: تغییر ظاهر با قرارگیری موس روی کامپوننت
- Disable: غیرفعال و عدم امکان تعامل.
- Open Down: باز شدن منو به سمت پایین.
- Open Up: باز شدن به سمت بالا (در صورت نبود فضای کافی در پایین صفحه).
ساختار آیتمها
نحوه طراحی و چیدمان آیتمها در داخل منوی باز شده میتواند متفاوت باشد:
انتخاب تکی و چندگانه
- Single Select: برای انتخاب دقیق یک گزینه. استفاده از Badge و Hint مجاز است.
- Multi Select: استفاده از چکباکس برای انتخابهای همزمان.
گروهبندی و تفکیک
- Title (عنوان دسته): برای دستهبندی منطقی گزینهها استفاده میشود (غیرقابل انتخاب).
- Divider (جداکننده): خطی برای تفکیک گروهها. در استفاده از آن زیادهروی نکنید.
سلسلهمراتب
بایدها و نبایدها
برای حفظ یکپارچگی و وضوح در طراحی، موارد زیر را رعایت کنید:
| Do | Don't |
|---|---|
| از Placeholderهای کوتاه و مستقیم استفاده کنید. | لیست گزینهها را بیش از حد طولانی و بدون دستهبندی رها نکنید. |
| در صورت نیاز به تفکیک منطقی از Divider استفاده کنید. | از آیکونهای نامرتبط که باعث سردرگمی کاربر میشود پرهیز کنید. |
نوشتار
- Placeholder: باید به صورت فعلی یا عبارت اسمی کوتاه باشد (مثلاً "انتخاب شهر").
- آیتمها: نام گزینهها باید کوتاه و بدون ابهام باشد.
- تگها: در حالت Tag، اگر عنوان طولانی است، متن باید طبق قوانین قطعشدگی (Ellipsis) مدیریت شود.