对话框 (Dialog)

弹窗显示内容。

概述

弹窗显示内容
弹出Alert、Confirm提示框
弹出敏捷表单内容
弹窗自定义组件内容

代码演示

1.默认示例

namespace WebSite.Docus.View.Dialogs;

class Dialog1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Button("提示对话框", Callback(OnAlert), StyleType.Primary);
        builder.Button("确认对话框", Callback(OnConfirm), StyleType.Primary);
    }

    private void OnAlert()
    {
        UI.Alert("XXX逻辑校验失败！", size: new(300, 200));
    }

    private void OnConfirm()
    {
        UI.Confirm("确定要XXX操作？", () =>
        {
            UI.Toast("操作成功！", StyleType.Success);
        });
    }
}

2.敏捷表单示例

namespace WebSite.Docus.View.Dialogs;

class Dialog2 : BaseComponent
{
    private string? formData;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Button("处理", Callback(OnPrompt), StyleType.Primary);
        builder.Span("tips", formData);
    }

    private void OnPrompt()
    {
        UI.Prompt("异常处理", new(300, 200), builder =>
        {
            builder.Field<TextArea>("原因", "Reason", true).Build();
        }, 
        data =>
        {
            formData = Utils.ToJson(data);
            StateChanged();
            UI.CloseDialog();
        });
    }
}

3.组件示例

using WebSite.Docus.View.Charts;
using WebSite.Docus.View.Timelines;

namespace WebSite.Docus.View.Dialogs;

class Dialog3 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Button("弹出柱状图组件", Callback(OnChartBar), StyleType.Primary);
        builder.Button("弹出自定义", Callback(OnCustom), StyleType.Primary);
    }

    private void OnChartBar()
    {
        UI.Show<Chart2>("柱状图", new(600, 400));
    }

    private void OnCustom()
    {
        UI.Show(new DialogOption
        {
            Title = "自定义",
            Size = new(600, 400),
            Content = BuildContent
        });
    }

    private void BuildContent(RenderTreeBuilder builder)
    {
        builder.Div("demo-dialog", attr =>
        {
            builder.Div("title", "流程状态");
            builder.Component<Timeline2>().Build();
        });
    }
}