Number Input
کامپوننت x-number-input یک ورودی عددی پیشرفته برای فرمها است که امکانات متنوعی مانند کنترل حداقل و حداکثر مقدار، پر کردن با صفر، اعداد اعشاری، پیشنهاد عدد، پیشوند و پسوند، نمایش مبلغ به حروف، کنترل راست/چپچین بودن، پیام راهنما، پیام خطا و ... را ارائه میدهد.
ویژگیها
- پشتیبانی از پیشنهاد عدد (
suggestions) - امکان تعیین پیشوند (
prefix) و پسوند (suffix) - کنترل حداقل (
min) و حداکثر (max) مقدار مجاز - پشتیبانی از حالت فقطخواندنی (
readonly) - قابلیت تنظیم راستچین یا چپچین بودن (
textAlign) - پشتیبانی از autofocus
- نمایش پیام راهنما هنگام غیرفعال بودن (
disabledTooltip) - نمایش پیام خطا و پیامهای سفارشی با استایلهای مختلف
- امکان شخصیسازی کلاسهای CSS برای خود و کانتینر
- پشتیبانی از پیام راهنما (
hint) - پشتیبانی از لیبل و فضای رزرو لیبل
- پشتیبانی از اعداد اعشاری (
allowDecimal,decimalPlaces) - پشتیبانی از پر کردن با صفر (
zeroFill,zeroFillSize) - پشتیبانی از اعداد بدون علامت (
unsigned) - نمایش جداکننده هزارگان (
showSeparator,separatorChar) - نمایش فلشهای افزایش/کاهش مقدار (
showArrows) - نمایش مبلغ به حروف (
showAmountInWords,amountInWordsSuffix,amountInWordsClass,amountInWordsFactor) - تنظیم جهت ورودی (
direction) - تنظیم گام افزایش/کاهش (
step) - پشتیبانی از hotkey align (
hotKeysAlign) - امکان کنترل محدوده به صورت بازهای (
rangeEnd)
ورودیهای کامپوننت
| نام پراپ | نوع داده | مقدار پیشفرض | توضیحات |
|---|---|---|---|
name | string | — | نام فیلد (اجباری) |
label | string | null | لیبل اصلی |
labelSpaceReserved | bool | false | آیا فضای لیبل حتی بدون مقدار رزرو شود؟ |
id | string | null | شناسه یکتا برای ورودی |
value | string | null | مقدار اولیه |
placeholder | string | null | placeholder برای ورودی |
suggestions | array | [] | آرایهای از پیشنهادهای عددی |
prefix | string | null | پیشوند |
suffix | string | null | پسوند |
max | int | null | حداکثر مقدار مجاز |
min | int | null | حداقل مقدار مجاز |
zeroFillSize | int | 0 | تعداد رقم برای پر کردن با صفر |
unsigned | bool | true | فقط اعداد مثبت |
zeroFill | bool | false | فعالسازی پر کردن با صفر |
autoFocus | bool | false | فوکوس خودکار روی ورودی |
allowDecimal | bool | false | اجازه ورود اعداد اعشاری |
decimalPlaces | int | 0 | تعداد ارقام اعشار مجاز |
direction | string | 'ltr' | جهت ورودی (ltr یا rtl) |
step | float | 1 | گام افزایش/کاهش مقدار |
showSeparator | bool | false | نمایش جداکن نده هزارگان |
separatorChar | string | ',' | کاراکتر جداکننده هزارگان |
showArrows | bool | true | نمایش فلشهای افزایش/کاهش مقدار |
textAlign | string | 'left' | جهت متن ورودی (left یا right) |
hotKeysAlign | string | 'left' | محل قرارگیری فلشها (left یا right) |
showAmountInWords | bool | false | نمایش مبلغ به حروف |
amountInWordsSuffix | string | "تومان" | پسوند مبلغ به حروف |
amountInWordsClass | string | null | کلاس CSS سفارشی برای مبلغ به حروف |
amountInWordsFactor | float | 1 | ضریب تبدیل مبلغ به حروف |
required | bool | false | اجباری بودن فیلد |
disabled | bool | false | غیرفعال بودن ورودی |
messageStyle | string/enum | "message" | استایل نمایش پیام (message, tooltip, ...) |
defaultMessageType | string/enum | "info" | نوع پیام پیشفرض (info, error, success, ...) |
defaultMessage | string | null | پیام پیشفرض برای نمایش |
suppressLogicMessages | bool | false | عدم نمایش پیامهای منطقی |
hint | string | null | پیام راهنما یا توضیح کوتاه |
class | string | null | کلاس CSS سفارشی برای خود ورودی |
containerClass | string | null | کلاس CSS سفارشی برای کانتینر |
disabledTooltip | string | null | پیام راهنما هنگام غیرفعال بودن ورودی |
rangeEnd | int/string | null | سلکتور انتهای بازه برای تعریف بازه ورودی عددی |
مثالها
نمونه پایه
<x-number-input
containerClass="col-md-6 mt-10"
label="{{ __('general.code') }}"
name="code"
placeholder="مجموع حقوق را وارد نمایید"
suffix="ریال"
class="custom-input"
show-separator="true"
id="code"
show-amount-in-words
amount-in-words-suffix="تومان"
amount-in-words-factor="0.1"
/>