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