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

                    
An error has occurred. This application may no longer respond until reloaded. Reload 🗙