نصب و آموزش کامپوننت دکمه انتخاب شونده Zeon Blazor CheckBoxButton
نحوه اضافه کردن کامپوننت (CheckBoxButton)
اضافه کردن فضای نام (در صفحه مورد نظر کد زیر را به Using ها اضافه کنید)
YourPage.razor
@using Zeon.Blazor.ZCheckBoxButton
اضافه کردن دکمه انتخاب شونده (CheckBoxButton)
در صفحه و تگ مورد نظر خود جهت اضافه کردن دکمه انتخاب شونده کد زیر را استفاده کنید
YourPage.razor
<ZCheckBoxButton Id="sample-check-box-button" Text="Text"></ZCheckBoxButton>
پارامتر ها (parameters)
| نام پارامتر | نوع پارامتر | مقدار پیشفرض | اجباری | توضیحات |
|---|---|---|---|---|
| Id | string | بله | شناسه باید یونیک باشد | |
| Text | string | خیر | متن نمایشی | |
| CssClass | string | btn-outline-primary | خیر | اضافه کردن کلاس های css |
| CssIcon | string? | null | خیر | آیکون های css |
| Width | string | 100% | خیر | 50% / 180px : عرض دکمه انتخاب شونده |
| Height | string | auto | خیر | ارتفاع دکمه انتخاب شونده |
| Display | string | flex | خیر | flex / grid / block نحوه نمایش دکمه |
| IsDisabled | bool | false | خیر | غیر فعال شدن دکمه انتخاب شونده |
| DefaultValue | bool | false | خیر | مقدار پیش فرض |
| OnValueChanged | EventCallback<bool> | خیر | رویداد تغییر وضعیت |
نمایشگاه و نمونه کد (Samples)
حالت های نمایش
Output Preview
Code
<ZCheckBoxButton Id="check1" Text="Text" DefaultValue="_people.IsActive" CssClass="btn-outline-primary remove-hover" OnValueChanged="Changed"></ZCheckBoxButton>
<ZCheckBoxButton Id="check2" Text="Add" CssIcon="fa fa-plus" DefaultValue="false" CssClass="btn-outline-danger remove-hover"></ZCheckBoxButton>
<ZCheckBoxButton Id="check3" CssIcon="zf zf-check" DefaultValue="false" Height="100px" Width="100px" CssClass="btn-outline-primary remove-hover rounded-circle"></ZCheckBoxButton>
<ZCheckBoxButton Id="check4" CssIcon="fa fa-home" DefaultValue="false" Text="Home" Height="100px" Width="100px" CssClass="btn-outline-success remove-hover rounded-circle"></ZCheckBoxButton>
<ZCheckBoxButton Id="check6" Display="grid" CssIcon="fa fa-home" DefaultValue="true" Text="Home" Height="100px" Width="100px" CssClass="btn-outline-success remove-hover rounded-circle"></ZCheckBoxButton>
<ZCheckBoxButton Id="check7" IsDisabled="true" Display="grid" CssIcon="fa fa-home" DefaultValue="true" Text="Home" Height="100px" Width="100px" CssClass="btn-outline-success remove-hover rounded-circle"></<ZCheckBoxButton>
<style>
.remove-hover:hover {
background-color: transparent;
color: revert;
}
</style>
تغییر وضعیت چک یا ان چک شدن در EventOnChange
Output Preview
Code
<ZCheckBoxButton Id="check8" Width="100%" Height="60px" DefaultValue="_people.IsActive" OnValueChanged="ChangeValueEvent" CssIcon="fa fa-user" Text="People Active" CssClass="btn-outline-success remove-hover "></ZCheckBoxButton>
//set value by in line method event on Change
<ZCheckBoxButton Id="check8" Width="100%" Height="60px" DefaultValue="_people.IsActive" OnValueChanged="@((isActive)=>{_people.IsActive = isActive;})" CssIcon="fa fa-user" Text="People Active" CssClass="btn-outline-success remove-hover "></ZCheckBoxButton>
<style>
.remove-hover:hover {
background-color: transparent;
color: revert;
}
</style>
@code {
People _people = new People() {
IsActive = true
}
;
class People {
public bool IsActive
{
get;
set;
}
}
private void ChangeValueEvent(bool value) {
_people .IsActive = value;
}
}