Switch Input
کامپوننت x-switch-input برای نمایش و مدیریت سوییچ (کلید روشن/خاموش) در فرمها با امکانات پیشرفته و قابل شخصیسازی استفاده میشود. این کامپوننت جایگزین مدرن و تعاملی برای چکباکس بوده و امکاناتی مانند تعیین مقدار روشن/خاموش، لیبلهای سفارشی، حالت فقطخواندنی، غیرفعال، پیام راهنما، کنترل اندازه و جهت نمایش، پیام خطا و ... را ارائه میدهد.
ویژگیها
- پشتیبانی از لیبل اصلی و رزرو فضای لیبل
- تعیین مقدار اولیه (checked) و مقدار روشن (
onValue) و خاموش (offValue) - قابلیت فقطخواندنی (
readonly) و غیرفعال (disabled) - پشتیبانی از پیام راهنما (
tooltip) و پیام غیرفعال بودن (disabledTooltip) - تعیین لیبل برای حالت روشن (
onLabel) و خاموش (offLabel) - کنترل نمایش لیبل وضعیت (
labelVisibility) - تعیین اندازه سوییچ (
size: xs, sm, md, lg) - تعیین جهت نمایش (
orientation: عمودی یا افقی) - نمایش پیام خطا و پیامهای سفارشی با استایلهای مختلف
- امکان شخصیسازی کلاسهای CSS برای خود سوییچ و کانتینر
- پشتیبانی از پیام راهنما (
hint) - فوکوس خودکار روی سوییچ (
autoFocus)
ورودیهای کامپوننت
| نام پراپ | نوع داده | مقدار پیشفرض | توضیحات |
|---|---|---|---|
name | string | — | نام فیلد (اجباری) |
label | string | null | لیبل اصلی سوییچ |
labelSpaceReserved | bool | false | آیا فضای لیبل حتی بدون مقدار رزرو شود؟ |
id | string | null | شناسه یکتا برای سوییچ |
checked | bool | false | آیا سوییچ بهصورت پیشفرض روشن باشد؟ |
readonly | bool | false | فقطخواندنی بودن سوییچ |
disabled | bool | false | غیرفعال بودن سوییچ |
required | bool | false | اجباری بودن فیلد |
messageStyle | string/enum | "message" | استایل نمایش پیام (message, tooltip, ...) |
defaultMessageType | string/enum | "info" | نوع پیام پیشفرض (info, error, warning, ...) |
defaultMessage | string | null | پیام پیشفرض برای نمایش |
tooltip | string | null | پیام راهنما هنگام هاور روی سوییچ |
disabledTooltip | string | null | پیام راهنما هنگام غیرفعال بودن سوییچ |
suppressLogicMessages | bool | false | عدم نمایش پیامهای منطقی |
onValue | string | '1' | مقدار ارسالی هنگام روشن بودن |
offValue | string | '0' | مقدار ارسالی هنگام خاموش بودن |
onLabel | string | 'بله' | لیبل حالت روشن |
offLabel | string | 'خیر' | لیبل حالت خاموش |
labelVisibility | bool | false | نمایش لیبل وضعیت (روشن/خاموش) کنار سوییچ |
size | string | 'md' | اندازه سوییچ (xs, sm, md, lg) |
orientation | string | 'vertical' | جهت نمایش: vertical (ستونی) یا horizontal (سطری) |
class | string | null | کلاس CSS سفارشی برای خود سوییچ |
containerClass | string | null | کلاس CSS سفارشی برای کانتینر |
hint | string | null | پیام راهنما یا توضیح کوتاه |
autoFocus | bool | false | فوکوس خودکار روی سوییچ |
مثالها
نمونه پایه
<x-switch-input
id="test"
name="toggle45"
label="دارک مود"
onLabel="روشن"
offLabel="خاموش"
defaultMessageType="info"
messageStyle="message"
onValue="1"
offValue="0"
checked="true"
/>