Basic modal.

A more complex example which define a customized footer button bar. The dialog will change to loading state after clicking the submit button, and when the loading is done, the modal dialog will be closed.

You could set footer to null if you don't need default footer buttons.

Use confirm() to show a confirmation modal dialog.

In the various types of information modal dialog, only one button to close dialog is provided.

You can use centered,style.top or other styles to set position of modal dialog.

Modal.destroyAll() will destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically.

Use Draggable to create a draggable Modal dialog, and you can control whether dragging is allowed only within the viewport through the parameter DragInViewport.

Use IConfirmService.Show to show a built-in confirm dialog, similar to Windows MessageBox.

Bind the submit of Form to the OK of Modal

Modify the display of the scroll bar.

Create a Confirm dialog box through ModalService, examples demonstrate user-defined templates, custom components.

Template code: ConfirmTemplateDemo.razor

@inherits FeedbackComponent<string, string>

<div>
    <Text>Please input "@config"</Text>
    value: <Input @bind-Value="value" Placeholder="@config" />
</div>

@code{

    string config;

    string value;

    protected override void OnInitialized()
    {
        config = this.Options;
        base.OnInitialized();
    }


    public override async Task OnFeedbackOkAsync(ModalClosingEventArgs args)
    {
        if (FeedbackRef is ConfirmRef confirmRef)
        {
            confirmRef.Config.OkButtonProps.Loading = true;
            await confirmRef.UpdateConfigAsync();
        }
        else if (FeedbackRef is ModalRef modalRef)
        {
            modalRef.Config.ConfirmLoading = true;
            await modalRef.UpdateConfigAsync();
        }

        await Task.Delay(1000);
        // only the input's value equals the initialized value, the OK button will close the confirm dialog box
        if (value != config)
            args.Cancel = true;
        else
            // method 1(not recommended): await (FeedbackRef as ConfirmRef<string>)!.OkAsync(value);
            // method 2: await (FeedbackRef as IOkCancelRef<string>)!.OkAsync(value);
            await base.OkCancelRefWithResult!.OnOk(value);

        await base.OnFeedbackOkAsync(args);
    }

    /// <summary>
    /// If you want <b>Dispose</b> to take effect every time it is closed in Modal, which created by ModalService,
    /// set <b>ModalOptions.DestroyOnClose = true</b>
    /// </summary>
    /// <param name="disposing"></param>
    protected override void Dispose(bool disposing)
    {
        Console.WriteLine("Dispose");
        base.Dispose(disposing);
    }
}

Users can customize the Footer of Modal components to realize any button and its functions. To facilitate users' use, AntDesign has built-in footers with only one OK button (ModalFooter.DefaultOkFooter) and only one Cancel button (ModalFooter.DefaultCancelFooter).

// DefaultOkFooter.razor
@{
    var okProps = ModalProps.OkButtonProps ?? new ButtonProps();
    okProps.Type = ModalProps.OkType;
    okProps.Loading = ModalProps.ConfirmLoading;
}

<div>
    <Button OnClick="@HandleOk"
            Loading="@okProps.Loading"
            Type="@okProps.Type"
            Block="@okProps.Block"
            Ghost="@okProps.Ghost"
            Shape="@okProps.Shape"
            Size="@okProps.Size"
            Icon="@okProps.Icon"
            Disabled="@okProps.Disabled"
            Danger="@okProps.IsDanger">
        @{
            if (ModalProps.OkText.IsT0)
            {
                @(ModalProps.OkText.AsT0)
            }
            else
            {
                @(ModalProps.OkText.AsT1)
            }
        }
    </Button>
</div>

@code{
    /// <summary>
    ///
    /// </summary>
    [CascadingParameter]
    public DialogOptions ModalProps { get; set; }

    private async Task HandleOk(MouseEventArgs e)
    {
        var onOk = ModalProps.OnOk;
        if (onOk != null)
        {
            await onOk.Invoke(e);
        }
    }
}

Asynchronously close a modal dialog when a the OK button is pressed. For example, you can use this pattern when you submit a form.

Use one-way binding Visible to control.

Set the Hender property to customize the header of the Modal. Default header component in ModelHeader.razor.

Otherwise, if Hender is set to null, the header can be hidden.

Use Confirm() to show a confirmation modal dialog. Asynchronous event OnCancel/OnOk can delay closing the dialog.

To customize the text of the buttons, you need to set okText and cancelText props.

Manually updating and destroying a modal from Modal.method.

Passing okButtonProps and cancelButtonProps will customize the OK button and cancel button props.

You can customize the text of the button to override the locale

Allow Modal to maximize within the browser. The Maximizable parameter will display the button for maximizing Modal, and the DefaultMaximized parameter can control the maximization during Modal initialization. Maximizable and DefaultMaximized are not coupled with each other. Even if Maximizable=false and DefaultMaximized=true will ensure that the Modal is maximized during initialization.

Note:

1. If Draggable is true, the position will be reset when the size is restored
2. It is turned off when the Modal is maximized, and it will remain maximized when it is displayed again

By setting Resizable=true, Modal can be resized horizontally.

use dropdown or popup in modal.

Create a Modal dialog box through ModalService, examples demonstrate custom components.

Template code: ModalTemplateDemo.razor

@inherits FeedbackComponent<Form.demo.Basic.Model>

<Form Model="@_model"
      LabelCol="new ColLayoutParam { Span = 8 }"
      WrapperCol="new ColLayoutParam { Span = 16 }"
      OnFinish="OnFinish"
      OnFinishFailed="OnFinishFailed">
    <FormItem Label="Username">
        <Input @bind-Value="@context.Username" />
    </FormItem>
    <FormItem Label="Password">
        <InputPassword @bind-Value="@context.Password" />
    </FormItem>
    <FormItem WrapperCol="new ColLayoutParam{ Offset = 8, Span = 16 }">
        <Checkbox @bind-Value="context.RememberMe">Remember me</Checkbox>
    </FormItem>
    <FormItem WrapperCol="new ColLayoutParam{ Offset = 8, Span = 16 }">
        <Button Type="@ButtonType.Primary" HtmlType="submit">
            Submit
        </Button>
    </FormItem>
</Form>

<br />
<br />


@code{


    private Form.demo.Basic.Model _model;

    protected override void OnInitialized()
    {
        _model = base.Options ?? new Form.demo.Basic.Model();
        base.OnInitialized();
    }

    private void OnFinish(EditContext editContext)
    {
        Console.WriteLine($"Success:{JsonSerializer.Serialize(_model)}");
        _ = base.FeedbackRef.CloseAsync();
    }

    private void OnFinishFailed(EditContext editContext)
    {
        Console.WriteLine($"Failed:{JsonSerializer.Serialize(_model)}");
    }
}