نصب و آموزش کامپوننت ظرف برای ورودی ها Zeon Blazor Input Container
نحوه اضافه کردن کامپوننت (ZInputContainer)
اضافه کردن فضای نام (در صفحه مورد نظر کد زیر را به Using ها اضافه کنید)
YourPage.razor
@using Zeon.Blazor.ZInputContainer
اضافه کردن ظرف ورودی (Input Container)
در صفحه و تگ مورد نظر خود جهت اضافه کردن ظرف ورودی کد زیر را استفاده کنید
YourPage.razor
<ZInputContainer Id="Id" TModel="People" For="Id">
</ZInputContainer>
پارامتر ها (parameters)
| نام پارامتر | نوع پارامتر | مقدار پیشفرض | اجباری | توضیحات |
|---|---|---|---|---|
| Id | string | خیر | شناسه برچسب | |
| TModel | Generic Type | بله | نوع مدل | |
| For | string | بله | نام پراپرتی یا نام برچسب جهت نمایش DisplayName | |
| CssIcon | string | خیر | آیکون های css | |
| Display | string | block | خیر | flex / block نحوه نمایش ظرف ورودی |
| Width | string | 100% | خیر | 50% / 180px : عرض ظرف ورودی |
| Height | string | auto | خیر | ارتفاع ظرف ورودی |
نمایشگاه و نمونه کد (Samples)
حالت های نمایش
Output Preview
Code
<ZInputContainer TModel="People" For="@nameof(People.Id)">
<ZInput Type="int"></ZInput>
</ZInputContainer>
<ZInputContainer TModel="People" For="@nameof(People.FirstName)">
<ZInput Type="string"></ZInput>
</ZInputContainer>
<ZInputContainer TModel="People" CssIcon="fa fa-text" For="">
<ZInput Type="string"></ZInput>
</ZInputContainer>
<ZInputContainer TModel="People" For="@nameof(People.Id)" CssIcon="fa fa-key">
<ZInput Type="int"></ZInput>
</ZInputContainer>
<ZInputContainer TModel="People" For="@nameof(People.LastName)" CssIcon="fa fa-text">
<ZInput Type="string"></ZInput>
</ZInputContainer>
<ZInputContainer TModel="People" For="@nameof(People.Id)" Display="flex" CssIcon="fa fa-key">
<ZInput Type="int"></ZInput>
</ZInputContainer>
<ZInputContainer TModel="People" For="@nameof(People.FirstName)" Display="flex" CssIcon="fa fa-text">
<ZInput Type="string"></ZInput>
</ZInputContainer>
@code {
public class People
{
[DisplayName("شناسه")]
public int Id { get; set; }
[DisplayName("نام")]
public string FirstName { get; set; } = null!;
public string LastName { get; set; } = null!;
}
}