نصب و آموزش کامپوننت نمایش پیغام Zeon Blazor AlertDialog
نحوه اضافه کردن کامپوننت (AlertDialog)
اضافه کردن فضای نام (در صفحه مورد نظر کد زیر را به Using ها اضافه کنید)
YourPage.razor
@using Zeon.Blazor.ZAlertDialog
@using Zeon.Blazor.ZAlertDialog.Constants
اضافه کردن نمایش پیغام انتخاب شونده (AlertDialog)
در صفحه و تگ مورد نظر خود جهت اضافه کردن نمایش پیغام انتخاب شونده کد زیر را استفاده کنید
YourPage.razor
<ZAlertDialog Text="my message" Caption="info"></ZAlertDialog>
پارامتر ها (parameters)
| نام پارامتر | نوع پارامتر | مقدار پیشفرض | اجباری | توضیحات |
|---|---|---|---|---|
| Text | string? | خیر | متن نمایشی | |
| Caption | string? | خیر | عنوان پیام | |
| AlertDialogCssIcon | string? | zf zf-info | خیر | اضافه کردن آیکون های css |
| BtnOkText | string? | تایید | خیر | متن نمایشی دکمه ok |
| BtnOkCssIcon | string? | zf zf-check | خیر | آیکون css برای دکمه ok |
| BtnCancelText | string? | لغو | خیر | متن نمایشی دکمه cancel |
| BtnCancelCssIcon | string? | zf zf-anti-clockwise-dir-semicircular-arrow | خیر | آیکون css برای دکمه cancel |
| BtnYesText | string? | بله | خیر | متن نمایشی دکمه yes |
| BtnYesCssIcon | string? | zf zf-check | خیر | آیکون css برای دکمه yes |
| BtnNoText | string? | خیر | خیر | متن نمایشی دکمه no |
| BtnNoCssIcon | string? | zf zf-ballot | خیر | آیکون css برای دکمه no |
| ButtonsSize | Dictionary<string, string> | خیر | تنظیم سایز دکمه ها | |
| AlertDialogButtons | Enum Type Of AlertDialogButtons | AlertDialogButtons.Ok | بله | نوع نمایش پیام های دیالوگ |
| BtnOnclick | EventCallback<Constants.DialogResult> | خیر | دریافت نوع دکمه انتخاب شده با نوع DialogResult |
نمایشگاه و نمونه کد (Samples)
حالت های نمایش
Output Preview
Code
<ZAlertDialog @ref="AlertDialogOk" AlertDialogButtons="AlertDialogButtons.Ok" Caption="پیام" Text="عملیات با موفقیت انجام شد"></ZAlertDialog>
<ZAlertDialog @ref="AlertDialogOkCancel" AlertDialogButtons="AlertDialogButtons.OkCancel" Caption="تایید قوانین" Text="اینجانب قوانین سایت را خوانده و تایید میکنم"></ZAlertDialog>
<ZAlertDialog @ref="AlertDialogYes" AlertDialogButtons="AlertDialogButtons.Yes" Caption="سوال" Text="آیا ادامه میدهید؟"></ZAlertDialog>
<ZAlertDialog @ref="AlertDialogYesNo" AlertDialogButtons="AlertDialogButtons.YesNo" Caption="هشدار" Text="آیا ادامه میدهید؟"></ZAlertDialog>
<ZAlertDialog @ref="AlertDialogYesNoCancel" AlertDialogButtons="AlertDialogButtons.YesNoCancel" Caption="ذخیره اطلاعات" Text="اطلاعات تغییر کرده آیا اطلاعات جدید را ذخیره می کنید؟"></ZAlertDialog>
private async Task ShowDialog(string? id)
{
switch (id)
{
case "Ok":
await AlertDialogOk.ShowDialogAsync();
break;
case "OkCancel":
await AlertDialogOkCancel.ShowDialogAsync();
break;
case "Yes":
await AlertDialogYes.ShowDialogAsync();
break;
case "YesNo":
await AlertDialogYesNo.ShowDialogAsync();
break;
case "YesNoCancel":
await AlertDialogYesNoCancel.ShowDialogAsync();
break;
default:
break;
}
}
گرفتن وضعیت دکمه کلیک شده
Output Preview
Code
<ZAlertDialog @ref="AlertDialogDeletePerson" AlertDialogButtons="AlertDialogButtons.YesNo" Caption="حذف اطلاعات" Text="اطلاعات حذف شده و قابل بازگشت نمی باشد آیا ادامه میدهید؟"></ZAlertDialog>
@code{
public ZAlertDialog AlertDialogDeletePerson { get; set; } = null!;
private async Task DeletePersonAsync()
{
var result = await AlertDialogDeletePerson.ShowDialogAsync();
if (result == DialogResult.Yes)
{
// remove Person
}
}
}
تغییر سایز دکمه ها
Code
<ZAlertDialog ButtonsSize="_buttonsSize" AlertDialogButtons="AlertDialogButtons.YesNo"></ZAlertDialog>
@code{
private Dictionary<string, string> _buttonsSize = new Dictionary<string, string>()
{
{"BtnOkWidth","130px" },
{"BtnOkHeight","auto" },
{"BtnYesWidth","130px" },
{"BtnYesHeight","auto" },
{"BtnNoWidth","130px" },
{"BtnNoHeight","auto" },
{"BtnCancelWidth","130px" },
{"BtnCancelHeight","auto" },
};
}