نصب و آموزش کامپوننت ورودی Zeon Blazor Input
نحوه اضافه کردن کامپوننت (ZInput)
اضافه کردن فضای نام (در صفحه مورد نظر کد زیر را به Using ها اضافه کنید)
YourPage.razor
@using Zeon.Blazor.ZInput
اضافه کردن ورودی (Input)
در صفحه و تگ مورد نظر خود جهت اضافه کردن ورودی کد زیر را استفاده کنید
YourPage.razor
<ZInput Type="int" "> </ZInput>
پارامتر ها (parameters)
نام پارامتر | نوع پارامتر | مقدار پیشفرض | اجباری | توضیحات |
---|---|---|---|---|
Id | string? | null | خیر | شناسه تگ ورودی |
Type | Generic Type | بله | نوع فرمت ورودی و خروجی :int ,decimal, string ... | |
OnValueChanged | EventCallback<Type> | خیر | رویداد تغییر مقدار ورودی | |
DefaultValue | Type | default | خیر | مقدار پیش فرض ورودی |
IsDisabled | bool | false | خیر | غیر فعال کردن ورودی |
CssClass | string? | null | خیر | افزودن کلاس css |
Format | string? | null | خیر | فرمت برای نمایش خروجی |
Validate | Func<Type, Task<(bool isValid, string message)>>? | null | خیر | اعمال یک یا چند Validate جهت تغییر مقدار ورودی |
توابع (functions)
نام تابع | نوع | توضیحات |
---|---|---|
SetValue | void | تنظیم مقدار |
نمایشگاه و نمونه کد (Samples)
حالت های نمایش
Output Preview
Code
<ZInput Type="int" DefaultValue="1000000"></ZInput> <ZInput Type="decimal" DefaultValue="1000000" Format="{0:0.000}"></ZInput> <ZInput Type="decimal" DefaultValue="@(decimal.Parse("1000000.00"))" Format="{0:N2}"></ZInput> <ZInput Type="double" Format="{0:#,##0.0000}"></ZInput> <ZInput Type="string" DefaultValue="_people.FirstName" CssClass="custom-css"></ZInput> <ZInput Type="string" IsDisabled=true></ZInput> <style> .custom-css { background-color: lightblue; } </<style> @code { private People _people = new People() { Id = 1, FirstName = "میثم", LastName = "خادمی" }; public class People { public int Id { get; set; } public string FirstName { get; set; } = null!; public string LastName { get; set; } = null!; } }
چند مثال برای پارامتر Type
Output Preview
Code
<ZInput Type="int" DefaultValue="1000000"></ZInput> <ZInput Type="short" DefaultValue="@(short.Parse("32767"))"></ZInput> <ZInput Type="decimal" DefaultValue="@(decimal.Parse("1000000.00"))"></ZInput> <ZInput Type="double"></ZInput> <ZInput Type="string" DefaultValue="_people.FirstName"></ZInput> // Only positive numbers <ZInput Type="UInt32" DefaultValue="1000"></ZInput>
کنترل تعداد اعشار با Format
Output Preview
Code
<ZInput Type="decimal" DefaultValue="@(decimal.Parse("1000000.0000"))" Format="{0:0.0}"></ZInput> <ZInput Type="decimal" DefaultValue="@(decimal.Parse("1000000.0000"))" Format="{0:0.00}"></ZInput> <ZInput Type="decimal" DefaultValue="@(decimal.Parse("1000000.0000"))" Format="{0:0.000}"></ZInput> <ZInput Type="decimal" DefaultValue="@(decimal.Parse("1000000.0000"))" Format="{0:0.0000}"></ZInput> <ZInput Type="decimal" DefaultValue="@(decimal.Parse("1000000.0000"))" Format="{0:N0}"></ZInput> <ZInput Type="decimal" DefaultValue="@(decimal.Parse("1000000.0000"))" Format="{0:N2}"></ZInput> <ZInput Type="decimal" DefaultValue="@(decimal.Parse("1000000.0000"))" Format="{0:N3}"></ZInput> <ZInput Type="decimal" DefaultValue="@(decimal.Parse("1000000.0000"))" Format="{0:N4}"></ZInput>
رویداد تغییر مقدار OnValueChanged
Output Preview
Code
<ZInput Type="decimal" OnValueChanged="ValueChangedEvent"></ZInput> <ZInput Type="int" OnValueChanged="ValueChangedEvent"></ZInput> <ZInput Type="string" OnValueChanged="ValueChangedEvent"></ZInput> <ZInput Type="string" OnValueChanged="(value) => { _people.FirstName = value; }"></ZInput> private People _people = new People() { Id = 1, FirstName = "meysam", LastName = "khademi" }; public class People { public int Id { get; set; } public string FirstName { get; set; } = null!; public string LastName { get; set; } = null!; } private void ValueChangedEvent(decimal value) { } private void ValueChangedEvent(int value) { } private void ValueChangedEvent(string value) { _people.LastName = value; }
شخصی سازی و اعمال کلاس های css
Output Preview
Code
<ZInput Type="decimal" CssClass="optional-input"></ZInput> <ZInput Type="int" CssClass="requierd-input"></ZInput> <ZInput Type="string" CssClass="info-input"></ZInput> <ZInput Type="string" CssClass="x-input"></ZInput> <style> .optional-input { background-color: mintcream; } .requierd-input { background-color: mistyrose; } .info-input { background-color: lightblue; } .x-input { background-color: darkblue; color: whitesmoke; border: dotted 1px black; border-radius: 3px; } </style>
اعمال Validation بر روی ورودی ها
Output Preview
Value must be less than 1000
value length must be less than 10
Code
<ZInput Type="decimal" @ref="DecimalInput1" DefaultValue="1000" Validate="ValidateDecimalInput"></ZInput> <ZInput Type="decimal" DefaultValue="@(decimal.Parse("999.99"))" Validate="ValidateDecimalInput"></ZInput> <ZInput Type="string" DefaultValue="@("meysam")" Validate="ValidateStringInput"></ZInput> <ZInput Type="string" DefaultValue="@("meysam khademi")" Validate="ValidateStringInput"></ZInput> public ZInput<decimal> DecimalInput1 { get; set; } = null!; private Task<(bool isValid, string message)> ValidateDecimalInput(decimal value) { if (value >= 1000) return Task.FromResult((isValid: false, message: "Value must be less than 1000")); if (value <= 100) return Task.FromResult((isValid: false, message: "Value must be greater than 100")); return Task.FromResult((true, string.Empty)); } private Task<(bool isValid, string message)> ValidateStringInput(string value) { if (value.Length > 10) return Task.FromResult((isValid: false, message: "value length must be less than 50")); return Task.FromResult((true, string.Empty)); } private void Submit() { var validation = DecimalInput1.IsValid; if(!validation.isValid) { allert(validation.message) return ; } // continue code }