Ant Blazor Modal Using Modal Component

In my previous article, I talked about how to create Ant Blazor modal dialog using the services. Today, let’s how to create a modal dialog using Ant Design Blazor’s Modal Component.

Let’s start with a basic example.

<Button Type="@ButtonType.Primary" OnClick="@ShowModal">
    Open Modal
</Button>

<Modal Title="Hello Blazor" Visible="@_visible" OnOk="@HandleOk" OnCancel="@HandleCancel">
    This is a modal dialog.
</Modal>

@code{
    private bool _visible;

    private void ShowModal()
    {
        _visible = true;
    }

    private void HandleOk(MouseEventArgs e)
    {
        _visible = false;
    }

    private void HandleCancel(MouseEventArgs e)
    {
        _visible = false;
    }
}

Above code, I created a button to open the modal. When the user clicked on the button, the modal will be displayed to the user. See below figure

Now, let’s break down this code.

<Modal Title="Hello Blazor" Visible="@_visible" OnOk="@HandleOk" OnCancel="@HandleCancel">
    This is a modal dialog.
</Modal>

This is the Modal Component Element. We are changing its visibility when we want to show/hide the modal dialog. The Visible parameter is store the boolean value of the modal’s visible status. OnOk and OnCancel parameters take function to execute when the user clicks the Ok and Cancel buttons in the modal respectively.

Modal Component has more parameters like above. According to official documentation, they are like this.

In the above example code, I give a string as a title. But if you want to add a button or something like that to the title we can use <TitleTemplate> tag like this.

<Modal Visible="@_visible" OnOk="@HandleOk" OnCancel="@HandleCancel" Closable="false">
    <TitleTemplate>
        <div style="display:flex; justify-content: space-between; align-items: center">
            <p>
                This is title
            </p>
            <Button Type="@ButtonType.Primary">Click Me</Button>
        </div>
    </TitleTemplate>
    <ChildContent>
        This is a modal dialog.
    </ChildContent>
</Modal>

You can see in the above code, I have used another tag called <ChildContent>. If we used <TitleTemplate> in our modal, we have to use this <ChildContent> tag definitely. If we didn’t use that our modal’s content will not be displayed.

You can also change the close icon of the modal. To do that we can use the <CloseIcon> tag. Like before, if we use this tag, again we have to use the <ChildContent> tag. See below code and output.

<Modal Visible="@_visible" OnOk="@HandleOk" Title="Hello" OnCancel="@HandleCancel" >
    <ChildContent>
        This is a modal dialog.
    </ChildContent>
    <CloseIcon>
        <Icon Type="clear" Theme="outline"/>
    </CloseIcon>
</Modal>

When you create a maximizable modal, you can there is additional icon button to maximize and restore the modal. We can change these icons too. There are two tags for that. See this code

<Modal Visible="@_visible" OnOk="@HandleOk" Maximizable="true" DefaultMaximized="false">
    <TitleTemplate>
        Hello
    </TitleTemplate>
    <ChildContent>
        This is a modal dialog.
    </ChildContent>
    <MaximizeBtnIcon>
        <Icon Type="deployment-unit" Theme="outline"/>
    </MaximizeBtnIcon>
    <RestoreBtnIcon>
        <Icon Type="fire" Theme="outline"/>
    </RestoreBtnIcon>
</Modal>

<MaximizeBtnIcon> tag is used to change maximize button and <RestoreBtnIcon> is used to change the restore modal button

<TitleTemplate>

<CloseIcon>

<RestoreBtnIcon>

<MaximizeBtnIcon>

If you use one of the above tags in our modal, you should use <ChildContent> tag to wrap your modal body content

---

Now you know how to create Ant Blazor modal dialog using Modal Component. You can play with different options of a modal. See you in the next article. Happy Coding. If you found this article useful, don't forget to give a like.

You can connect with me on https://hirushafernando.com/