Select Image
کامپوننت x-select-image یک ورودی انتخاب تصویر پیشرفته برای فرمها است که امکان انتخاب تصویر از بین یک مجموعه از تصاویر را فراهم میکند. این کامپوننت تصویر انتخابشده را به صورت پیشنمایش نمایش میدهد و امکان نمایش لیست تصاویر به صورت grid را دارد.
ویژگیها
- نمایش پیشنمایش تصویر انتخابشده
- نمایش لیست تصاویر به صورت grid با تعداد ستون قابل تنظیم
- پشتیبانی از تصویر placeholder (میتواند URL باشد) برای حالت بدون انتخاب
- دریافت فایلها از طریق آیدی یا مدل فایل (گزینهها و مقدار)
- قابلیت شخصیسازی اندازه و شکل پیشنمایش
- قابلیت تنظیم عرض و ارتفاع حداکثر کانتینر لیست تصاویر
- پشتیبانی از لیبل و فضای رزرو لیبل
- نمایش پیام راهنما هنگام غیرفعال بودن (
disabledTooltip) - پشتیبانی از پیام راهنما (
hint) - کنترل نمایش پیامهای منطقی (
suppressLogicMessages) - استایل و نوع پیام پیشفرض (
messageStyle,defaultMessageType)
ورودیهای کامپوننت
| نام پراپ | نوع داده | مقدار پیشفرض | توضیحات |
|---|---|---|---|
name | string | — | نام فیلد (اجباری) |
label | string | null | لیبل اصلی |
labelSpaceReserved | bool | false | آیا فضای لیبل حتی بدون مقدار رزرو شود؟ |
id | string | null | شناسه یکتا برای ورودی |
class | string | null | کلاس CSS سفارشی برای خود ورودی |
containerClass | string | null | کلاس CSS سفارشی برای کانتینر |
value | int, string, object | null | مقدار اولیه (آیدی فایل یا مدل فایل؛ URL پشتیبانی نمیشود) |
options | array<int, string, object> | [] | آرایهای از آیدی یا مدل فایل برای انتخاب |
required | bool | false | اجباری بودن فیلد |
disabled | bool | false | غیرفعال بودن ورودی |
previewSize | string | "48px" | اندازه پیشنمایش تصویر |
previewBorderRadius | string | "24px" | شعاع گوشههای پیشنمایش تصویر |
columns | int | 3 | تعداد ستونهای grid لیست تصاویر |
containerWidth | string | "188px" | عرض کانتینر لیست تصاویر |
maxContainerHeight | string | "400px" | حداکثر ارتفاع کانتینر لیست تصاویر |
placeholderImageUrl | string, int, object | 'vendor/dornica/panel-kit/images/placeholder/blank.png' | URL، آیدی یا مدل فایل برای placeholder (تنها مقداری که URL میپذیرد) |
defaultMessage | string | null | پیام پیشفرض برای نمایش |
messageStyle | string/enum | "message" | استایل نمایش پیام (message, tooltip, ...) |
defaultMessageType | string/enum | "info" | نوع پیام پیشفرض (info, error, success, ...) |
hint | string | null | پیام راهنما یا توضیح کوتاه |
suppressLogicMessages | bool | false | عدم نمایش پیامهای منطقی |
disabledTooltip | string | null | پیام راهنما هنگام غیرفعال بودن ورودی |
نکات مهم
- گزینهها و مقدار تنها باید آیدی فایل یا مدل فایل باشند؛ URL پذیرفته نمیشود.
- تصویر placeholder میتواند URL، آیدی یا مدل فایل باشد.
- مقادیر به کمک FileManager به URL تبدیل میشوند؛ مقدار نامعتبر باعث استثنا میشود.
- در صورت عدم یافتن فایل، آن گزینه نادیده گرفته میشود.
مثالها
نمونه : استفاده ساده
<x-select-image
name="avatar"
label="انتخاب عکس"
value="12"
:options="[12, 44, 75, 65, 12, 36, 41, 29]"
:columns="3"
containerWidth="200px"
placeholderImageUrl="https://example.com/placeholder.png"
></x-select-image>