Radio Group

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

ویژگی‌ها

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

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

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

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

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

مثال‌ها

نمونه پایه

$options = [
    ['label' => 'مرد', 'value' => 'male'],
    [
        'label' => 'زن',
        'value' => 'female',
        'disabled' => 'true',
        'tooltip' => 'این گزینه غیر فعال است',
    ],
    [
        'label' => 'دیگر',
        'value' => 'other',
        'readonly' => 'true',
        'tooltip' => 'این گزینه صرفا برای نمایش می باشد',
    ],
];

<x-radio-group
    name="gender"
    id="gender"
    label="یک مورد را انتخاب کنید"
    required
    tooltip="for radio group"
    :options="$options"
    checked="male"
    messageStyle="toast"
    defaultMessageType="success"
    orientation="horizontal"
    labelSpaceReserved="true"
    defaultMessage="متن دیفالت"
    hint="یک مورد را انتخاب کنید"
    class="custom-radio-class"
    containerClass="custom-container-class"
    wrapperClass="flex-wrap"
/>

ویژگی‌ها​

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

مثال‌ها​

نمونه پایه​

ویژگی‌ها

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

مثال‌ها

نمونه پایه