Dialogs — Blazify

Dialog with a reference

Grab the dialog with a ref and call Show(). Important: keep bind-Open too, so the open state is owned by the parent.

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) },
    };
}

Fully controlled with bind-Open

No reference at all — just a bool. The simplest and most reliable way.

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;
}

Central confirm / alert service

Raise dialogs from anywhere without writing markup. Just place BzDialogHost once in your layout.

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

A lightweight popover for menus — with Trigger and 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>

Dialog sizes

All sizes share one snippet; only Size changes.

Size	Use for
`BzDialogSize.Small`	Short confirms, simple messages
`BzDialogSize.Medium`	Regular forms (default)
`BzDialogSize.Large`	Tables, long content

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;
    }
}

Dialogs & popups