Checkbox Group

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

ویژگی‌ها

پشتیبانی از لیبل اصلی برای گروه چک‌باکس‌ها
امکان تعیین گزینه‌ها (options) به صورت آرایه‌ای از مقدار و لیبل
قابلیت تعیین مقدارهای انتخاب‌شده اولیه (checked)
پشتیبانی از حالت فقط‌خواندنی (readonly) و غیرفعال (disabled)
نمایش پیام راهنما (tooltip) و پیام غیرفعال بودن (disabledTooltip)
امکان تعیین جهت نمایش (افقی یا عمودی) با پراپ orientation
نمایش پیام خطا و پیام‌های سفارشی با استایل‌های مختلف
امکان شخصی‌سازی کلاس‌های CSS برای خود گروه و کانتینر
پشتیبانی از پیام راهنما برای هر گزینه به صورت جداگانه
پشتیبانی از گزینه‌های غیرفعال یا فقط‌خواندنی به صورت جداگانه

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`name`	`string`	—	نام فیلد (اجباری)
`options`	`array`	—	آرایه‌ای از گزینه‌ها. هر گزینه باید شامل `value` و `label` باشد.
`label`	`string`	`null`	لیبل اصلی گروه چک‌باکس‌ها
`labelSpaceReserved`	`bool`	`false`	آیا فضای لیبل حتی بدون مقدار رزرو شود؟
`id`	`string`	`null`	شناسه یکتا برای گروه چک‌باکس
`checked`	`array`	`[]`	آرایه‌ای از مقدارهای انتخاب‌شده اولیه
`class`	`string`	`null`	کلاس CSS سفارشی برای چک‌باکس‌ها
`containerClass`	`string`	`null`	کلاس CSS سفارشی برای کانتینر
`readonly`	`bool`	`false`	فقط‌خواندنی بودن کل گروه
`disabled`	`bool`	`false`	غیرفعال بودن کل گروه
`required`	`bool`	`false`	اجباری بودن فیلد
`hint`	`string`	`null`	پیام راهنما یا توضیح کوتاه
`messageStyle`	`string`/`enum`	`"message"`	استایل نمایش پیام (message, tooltip, ...)
`defaultMessageType`	`string`/`enum`	`"info"`	نوع پیام پیش‌فرض (info, error, success, ...)
`defaultMessage`	`string`	`null`	پیام پیش‌فرض برای نمایش
`suppressLogicMessages`	`bool`	`false`	عدم نمایش پیام‌های منطقی
`tooltip`	`string`	`null`	پیام راهنما هنگام هاور روی گروه
`disabledTooltip`	`string`	`null`	پیام راهنما هنگام غیرفعال بودن گروه
`orientation`	`string`	`"vertical"`	جهت نمایش: `vertical` (ستونی) یا `horizontal` (سطری)
`gap`	`string`	`null`	فاصله بین گزینه‌های چک‌باکس‌ها
`optionClass`	`string`	`null`	کلاس CSS سفارشی برای هر گزینه
`labelClass`	`string`	`null`	کلاس CSS سفارشی برای لیبل اصلی گروه

ساختار هر گزینه در options:

کلید	نوع داده	توضیحات
`value`	string	مقدار گزینه (اجباری)
`label`	string	متن نمایشی گزینه (اجباری)
`tooltip`	string	پیام راهنما هنگام هاور روی گزینه (اختیاری)
`disabled`	bool	غیرفعال بودن گزینه (اختیاری)
`readonly`	bool	فقط‌خواندنی بودن گزینه (اختیاری)

مثال‌ها

نمونه پایه

$options = [
    [
        'label'   => 'گزینه اول',
        'value'   => 'xs',
        'tooltip' => 'XS',
    ],
    [
        'label'    => 'گزینه دوم',
        'value'    => 's',
        'tooltip'  => 'غیرفعال',
        'disabled' => 'true',
    ],
    [
        'label'    => 'گزینه سوم',
        'value'    => 'lg',
        'tooltip'  => 'شما دسترسی تغییر ندارید',
        'readonly' => 'true',
    ],
    [
        'label'   => 'گزینه چهارم',
        'value'   => 'xxl',
        'tooltip' => 'XXL',
    ],
];

<x-checkbox-group
    name="sizes"
    id="size"
    tooltip="test main tooltip"
    :options="$options"
    label="انتخاب اندازه"
    class="custom-checkbox"
    containerClass="my-custom-container"
    defaultMessage="لطفا حداقل یک اندازه را انتخاب کنید."
    defaultMessageType="warning"
    messageStyle="info"
    hint="شما باید یک گزینه را انتخاب کنید."
/>

ویژگی‌ها​

ورودی‌های کامپوننت​

مثال‌ها​

نمونه پایه​

ویژگی‌ها

ورودی‌های کامپوننت

مثال‌ها

نمونه پایه