AntDesignBlazorでポップアップを作る

サンプルコード

Demo.razor

@page "/Modal"

<Button Type="primary" OnClick="@(()=>{ isModalVisible = true; })">
    ポップアップ表示
</Button>
<ModalDemo ModalTitle="ポップアップ画面" Width="1500" Visible=@isModalVisible>
    <ChildContent>
        <SpreadComponent/>
    </ChildContent>
</ModalDemo>

<SpreadComponent2 RowSelectAction="@rowSelectAction" />

@code
{
    private bool isModalVisible = false;

    private void rowSelectAction() 
    {
        isModalVisible = true;
        StateHasChanged();
    }
}

ModalDemo.razor

<Modal Title="@ModalTitle"
       Visible="@Visible"
       Draggable="@(true)"
       Footer="@ModalFooter.DefaultCancelFooter"
       OnCancel="(e)=>{Visible = false;}"
       Width="@Width"
>
@ChildContent
</Modal>

@code{
    [Parameter]
    public string? ModalTitle { get; set; }
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
    [Parameter]
    public double Width { get; set; }
    [Parameter]
    public bool Visible { get; set; }
}

解説

概要

モーダルをポップアップとして実装しています。
ポップアップコンポーネント(ModalDemo.razor)は、ポップアップとしての表示機能を担当しています。
ポップアップとして、何を表示するかはコンポーネントを呼ぶ側が自由に設定できるようにしています。

表示内容の設定

サンプルコードでは、SpreadComponentを表示するようにしています。
表示内容は＜ChildContent＞タグで囲った部分が、ポップアップとして表示されます。

表示非表示の切り替え

Visibleパラメータによって、表示非表示を切り替えています。
サンプルコードでは、ボタン押下時とテーブルの行選択時の２パターンでポップアップが表示されるようにしています。