نصب و آموزش کامپوننت دکمه Zeon Blazor Button
نحوه اضافه کردن کامپوننت (Button)
اضافه کردن فضای نام (در صفحه مورد نظر کد زیر را به Using ها اضافه کنید)
YourPage.razor
@using Zeon.Blazor.ZButton
اضافه کردن دکمه (Button)
در صفحه و تگ مورد نظر خود جهت اضافه کردن دکمه کد زیر را استفاده کنید
YourPage.razor
<ZButton Text="Text"></ZButton>
پارامتر ها (parameters)
| نام پارامتر | نوع پارامتر | مقدار پیشفرض | اجباری | توضیحات |
|---|---|---|---|---|
| Id | string? | null | خیر | شناسه دکمه که در صورت تنظیم شدن می توانید مقدار را در هنگام رویداد کلیک دریافت کنید |
| Text | string? | null | خیر | متن نمایشی |
| Onclick | EventCallback<string?> | false | بله | رویداد کلیک دکمه |
| CssClass | string | btn-outline-primary | خیر | اضافه کردن کلاس های css |
| CssCssIcon | string | zf zf-check | خیر | آیکون های css |
| Display | string | flex | خیر | flex / block نحوه نمایش دکمه |
| Width | string | 100% | خیر | 50% / 180px : عرض دکمه |
| Height | string | auto | خیر | ارتفاع دکمه |
| IsWaiting | bool | false | خیر | نمایش اسپینر و غیر فعال شدن دکمه |
| IsDisabled | bool | false | خیر | غیر فعال شدن دکمه |
نمایشگاه و نمونه کد (Samples)
حالت های نمایش
Output Preview
Code
<ZButton Text="Text" CssClass="btn-outline-primary"></<ZButton>
<ZButton Text="Text" CssClass="btn-outline-success" CssIcon="fa fa-home"></ZButton>
<ZButton Text="Text" CssClass="btn-outline-danger"></ZButton>
<ZButton Text="Text" CssClass="btn-outline-warning"></ZButton>
<ZButton Text="Text" CssClass="btn-primary" CssIcon="fa fa-plus" Height="35px"></ZButton>
<ZButton Text="Text" CssClass="btn-success"></ZButton>
<ZButton Text="Text" CssClass="btn-danger"></ZButton>
<ZButton Text="Text" CssClass="btn-outline-primary" Height="100px" Width="65px" Display="column"></ZButton>
<ZButton Text="" CssClass="btn-outline-success rounded-circle" Display="block" CssIcon="fa fa-home" Height="50px" Width="50px"></ZButton>
<ZButton Text="" CssClass="btn-primary rounded-circle" Display="block" CssIcon="fa fa-plus" Height="50px" Width="50px"></ZButton>
<ZButton Text="OK" CssClass="btn-outline-primary rounded-circle" Display="block" CssIcon="" Height="50px" Width="50px"></ZButton>
<ZButton Text="Text" IsWaiting="true" CssClass="btn-danger" CssIcon="fa fa-plus" Height="35px"></ZButton>
غیر فعال کردن دکمه در هنگام ارسال یک درخواست
Output Preview
Code
<ZButton Id="SendRequest" IsWaiting="_btnSendRequestIsWaiting" Text="Submit" CssIcon="fa fa-check" Onclick="ButtonsOnClick" Width="180px"></ZButton>
@code {
private bool _btnSendRequestIsWaiting = false;
private async Task ButtonsOnClick(string id)
{
_btnSendRequestIsWaiting = true;
// send request to server
await Task.Delay(2000);
_btnSendRequestIsWaiting = false;
}
}