BzDialog / BzPopup

دیالوگ و پاپ آپ

دیالوگ با reference، سرویس مرکزی confirm/alert و پاپ آپ.

دیالوگ با reference

با ref به دیالوگ دسترسی می گیریم و Show() را صدا می زنیم. نکته مهم: حتما bind-Open را هم قرار بده تا وضعیت باز بودن در والد نگه داشته شود.

razor
@using BzCore.Components.Dialog
@using BzCore.Components.Input
@using BzCore.Components.Button
@using BzCore.Dialog
@using BzCore.Enums

<BzButton Text="باز کردن دیالوگ" StartIcon="fa-solid fa-window-maximize"
          OnClick="@(() => _dlg.Show())" />

@* bind-Open is required: after a click the parent re-renders and would otherwise
   push Open=false back into the dialog and close it again. *@
<BzDialog @ref="_dlg" @bind-Open="_dlgOpen"
          Title="ویرایش کاربر" Icon="fa-solid fa-user-pen"
          Size="BzDialogSize.Medium" Buttons="_buttons"
          OnClose="@(r => _result = r)">
    <ChildContent>
        <BzInput TValue="string" @bind-Value="_editName" Label="نام کاربر" Clearable />
    </ChildContent>
</BzDialog>

@if (_result is not null)
{
    <p>نتیجه: @(_result.Confirmed ? $"تایید ({_editName})" : "لغو")</p>
}

@code {
    private BzDialog _dlg = default!;
    private bool _dlgOpen;
    private BzDialogResult? _result;
    private string _editName = "";

    private List<BzDialogButton> _buttons = new()
    {
        new BzDialogButton { Text = "انصراف", IsCancel = true, Variant = BzButtonVariant.Text },
        new BzDialogButton { Text = "ذخیره", Color = BzColor.Primary,
            OnClick = async () => await Task.Delay(600) },
    };
}
کنترل کامل با bind-Open

بدون reference — فقط یک bool. ساده ترین و مطمئن ترین روش.

razor
@using BzCore.Components.Dialog
@using BzCore.Components.Button
@using BzCore.Enums

<BzButton Text="باز کردن" Variant="BzButtonVariant.Outlined"
          OnClick="@(() => _open = true)" />

<BzDialog @bind-Open="_open" Title="سلام" Icon="fa-solid fa-hand" Size="BzDialogSize.Small">
    <ChildContent>
        <p>این دیالوگ فقط با یک متغیر bool کنترل میشه.</p>
    </ChildContent>
</BzDialog>

@code {
    private bool _open;
}
سرویس مرکزی confirm / alert

بدون نوشتن هیچ مارکاپی، از هر جای برنامه دیالوگ بگیرید. کافی است یک بار BzDialogHost را در لی اوت قرار بده.

razor
@using BzCore.Components.Button
@using BzCore.Components.Dialog
@using BzCore.Dialog
@using BzCore.Enums
@inject IBzDialogService DialogSvc

<BzButton Text="Confirm" Color="BzColor.Danger" StartIcon="fa-solid fa-trash" OnClick="ConfirmDelete" />
<BzButton Text="Alert" Variant="BzButtonVariant.Outlined" OnClick="ShowAlert" />

@if (_deleted) { <p>رکورد حذف شد</p> }

@* Place this once — usually in MainLayout, not on every page. *@
<BzDialogHost />

@code {
    private bool _deleted;

    private async Task ConfirmDelete()
    {
        var ok = await DialogSvc.ConfirmAsync("حذف رکورد", "از حذف این رکورد مطمئن هستید؟");
        if (ok) _deleted = true;
    }

    private async Task ShowAlert() =>
        await DialogSvc.AlertAsync("اطلاع", "این یک پیام اطلاع رسانی است.");
}

@*
Program.cs — the service is registered by AddBlazify():
    builder.Services.AddBlazify();
*@
BzPopup

پاپ آور سبک برای منوها — با Trigger و ChildContent.

razor
@using BzCore.Components.Popup
@using BzCore.Components.Button
@using BzCore.Enums

<BzPopup Placement="BzPopupPlacement.Bottom" Width="220px">
    <Trigger>
        <BzButton Text="منوی کاربر" EndIcon="fa-solid fa-chevron-down" Variant="BzButtonVariant.Soft" />
    </Trigger>
    <ChildContent>
        <BzButton Variant="BzButtonVariant.Text" FullWidth StartIcon="fa-solid fa-user" Text="پروفایل" />
        <BzButton Variant="BzButtonVariant.Text" FullWidth StartIcon="fa-solid fa-gear" Text="تنظیمات" />
        <BzButton Variant="BzButtonVariant.Text" FullWidth StartIcon="fa-solid fa-right-from-bracket"
                  Text="خروج" Color="BzColor.Danger" />
    </ChildContent>
</BzPopup>
اندازه های دیالوگ

همه اندازه ها یک کد دارند و فقط Size فرق میکنه.

Size کاربرد
BzDialogSize.Smallتایید کوتاه، پیام ساده
BzDialogSize.Mediumفرم های معمولی (پیش فرض)
BzDialogSize.Largeجدول، محتوای طولانی
razor
@using BzCore.Components.Dialog
@using BzCore.Components.Button
@using BzCore.Enums

<BzButton Text="Small"  Variant="BzButtonVariant.Soft" OnClick="@(() => Open(BzDialogSize.Small))" />
<BzButton Text="Medium" Variant="BzButtonVariant.Soft" OnClick="@(() => Open(BzDialogSize.Medium))" />
<BzButton Text="Large"  Variant="BzButtonVariant.Soft" OnClick="@(() => Open(BzDialogSize.Large))" />

<BzDialog @bind-Open="_open" Size="_size" Title="@_size.ToString()" Icon="fa-solid fa-ruler-combined">
    <ChildContent>
        <p>Size = <b>@_size</b></p>
    </ChildContent>
</BzDialog>

@code {
    private bool _open;
    private BzDialogSize _size = BzDialogSize.Medium;

    private void Open(BzDialogSize size)
    {
        _size = size;
        _open = true;
    }
}