نصب و آموزش کامپوننت ورودی 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
}