第一个对话框。

设置 Hender 属性可以自定义消息框的头部。默认头部组件在 ModelHeader.razor。

另外，如果设置 Hender 为 null 可隐藏头部。

使用 confirm() 可以快捷地弹出确认框。

各种类型的信息提示，只提供一个按钮用于关闭。

使用 centered 或类似 style.top 的样式来设置对话框位置。

使用 Modal.destroyAll() 可以销毁弹出的确认窗。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题。

使用 Draggable 可以创建一个可拖拽的Modal，并且可以通过 DragInViewport 控制是否仅仅允许在视窗范围内进行拖动。

使用 IConfirmService.Show 可以快捷地弹出一个内置的确认框，类似于 Windows MessageBox。

将Form的submit和Modal的OK绑定

修改滚动条的显示方式。

通过 ModalService 创建一个 Confirm 对话框，示例中演示了用户自定义模板、自定义component。

模板代码：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);
    }
}

用户可以自定义 Modal 组件的 Footer，以实现任意按钮及其功能。为了方便用户使用，AntDesign 内置了 仅有一个 OK 按钮的组件(ModalFooter.DefaultOkFooter) 和 仅有一个 Cancel 按钮的组件(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);
        }
    }
}

点击确定后异步关闭对话框，例如提交表单。

使用单向绑定的 Visible 控制。

更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。

不需要默认确定取消按钮时，你可以把 footer 设为 null。

使用 Confirm() 可以快捷地弹出确认框。OnCancel/OnOk 异步事件 可以延迟关闭。

使用ModalClosingEventArgs.Cancel决定窗体是否关闭。返回结果: true 如果应取消事件;否则为 false。

设置 okText 与 cancelText 以自定义按钮文字。

手动更新和关闭 Modal.method 方式创建的对话框。

传入 okButtonProps 和 cancelButtonProps 可分别自定义确定按钮和取消按钮的 props。

可以自定义按钮的文字，以覆盖 locale

允许Modal在浏览器内最大化. Maximizable参数将会展示 Modal 最大化的按钮；DefaultMaximized 参数可以控制在 Modal 初始化的时候最大化。 Maximizable 和 DefaultMaximized 并不相互耦合，即使 Maximizable=false, DefaultMaximized=true 也会保证 Modal 初始化的时候最大化。 注意：

1. 如果Draggable为true，恢复大小的时候将会重置位置
2. 当Modal最大化的时候被关闭，再次显示的时候会保持最大化的样子

通过设置 Resizable=true，可以对 Modal 在水平方向进行大小调整。

在Modal中使用具有下拉或弹出功能的组件。

通过 ModalService 创建一个 Modal 对话框，示例中演示了自定义组件。

模板代码：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)}");
    }
}