Enterprise-level component library based on Bootstrap and Blazor
gitee
version
license
download
repo
commit
build
coverage

Dialog 对话框组件

通过注入服务调用 Show 方法弹出窗口进行人机交互

组件使用介绍:

1. 注入服务 DialogService

@inject DialogService DialogService
[Inject]
[NotNull]
private DialogService? DialogService { get; set; }

2. 调用其实例 api

var op = new DialogOption()
{
    Title = "数据查询窗口",
    ShowFooter = false,
    BodyContext = DataPrimaryId
};
op.Component = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new Dictionary<string, object?>
{
    [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
});
await DialogService.Show(op);

通过设置 DialogOption 属性对模态框进行基本属性设置

Demo

通过设置 DialogOption IsKeyboard 参数,开启弹窗是否支持 ESC,请点击后面按钮设置后再点击 弹窗 按钮测试效果

通过设置 HeaderTemplate 属性对模态框标题栏进行自定义设置

Demo

通过调用 Show<Counter>() 来弹出一个自定义组件

Demo

本例中弹出对话框中包含一个示例网站的自带 Counter 组件

通过设置 BodyContext 属性值,可以把参数传递给弹窗中的组件内

Demo

本例中点击按钮时设置 BodyContext 值为 我是传参,弹窗内容为自定义组件 DemoComponent,组件内通过级联参数获取到其值

本例中通过传递一个主键,在弹窗内的组件通过此主键进行数据查询,并将结果显示在弹窗内

Demo

本例讲解如何通过代码打开与关闭弹窗

Demo

利用弹窗参数 DialogOption 实例,弹窗弹出后实例中的 Dialog 属性值即为当前弹窗句柄,通过调用其 Toggle/Close 方法即可关闭弹窗

本例讲解如何通过代码打开与关闭弹窗

Demo

设置参数 ShowHeaderCloseButton 禁止弹窗 Header 右侧显示 关闭 按钮

点击弹窗内部按钮继续弹出对话窗

Demo

功能介绍

  • 点击按钮弹出对话窗
  • 切换弹窗内 Tab 组件的第三个标签页 角色管理
  • 点击标签页中的弹窗继续弹出对话框
  • 关闭当前对话框后之前打开的对话框 保持状态

通过 ShowModal 方法弹出线程阻塞模式的对话框

Demo

功能介绍

  • 点击按钮弹出模态弹窗
  • 更改模态弹窗内数值点击 确认 按钮时数值 更新
  • 更改模态弹窗内数值点击 取消 或者 关闭 按钮时数值 不更新
  • 再次点击弹出模态弹窗时,数值保持一致

通过 ShowEditDialog 方法弹出保存对话框

Demo

功能介绍

  • 点击按钮弹出编辑弹窗
  • 通过 EditDialogOption 参数对弹窗进行设置
  • 设计出发点通过给定 Model 或者 Items 自动生成带客户端验证的表单窗口

通过 ShowSearchDialog 方法弹出保存对话框

Demo

功能介绍

  • 点击按钮弹出搜索弹窗
  • 通过 SearchDialogOption 参数对弹窗进行设置
  • 设计出发点通过给定 Model 或者 Items 自动生成搜索窗口

通过 ShowSaveDialog 方法弹出保存对话框

Demo

功能介绍

  • 点击按钮弹出保存弹窗
  • 设计出发点通过给定 TComponent 自动生成保存窗口,通过设置 saveCallback 在保存回调方法中进行数据处理,TComponent 泛型组件所需要参数可以通过 parameters 进行传递

通过设置 Size FullScreenSize 参数组合可以实现非常灵活的窗体大小控制

Demo

通过设置 ShowPrintButton 使 Header 上显示一个打印预览按钮

Demo

通过设置 PrintButtonText 更改 打印预览 按钮文字

通过设置 ShowMaximizeButton 使 Header 上显示一个窗口最大化按钮

Demo

模拟一个邮件应用,弹窗选择收件人后填入下方的收件人框。

Demo

功能介绍

  • 点击按钮弹出模态弹窗
  • 通过级联传参 BodyContext 传递 10 到弹窗中初始化数据
  • 选中 Table 组件中的行数据,通过双向绑定对 SelectedRows 数据进行 更新
  • 点击 选中 按钮通过双向绑定对 Emails 数据进行 更新
  • 点击 取消 或者 关闭 按钮时 Emails不更新
  • 再次点击弹出模态弹窗时,组件内行选中状态保持一致
  • 弹窗中未选择用户时禁止关闭弹窗

DialogOption 属性

Loading...
@page "/dialogs"

<h3>Dialog 对话框组件</h3>

<h4>通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互</h4>

<p>组件使用介绍:</p>

<p class="code-label">1. 注入服务 <code>DialogService</code></p>
<Pre>@inject DialogService DialogService</Pre>
<Pre>[Inject]
[NotNull]
private DialogService? DialogService { get; set; }
</Pre>
<p class="code-label">2. 调用其实例 <code>api</code></p>
<Pre>var op = new DialogOption()
{
    Title = "数据查询窗口",
    ShowFooter = false,
    BodyContext = DataPrimaryId
};
op.Component = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new Dictionary<string, object?>
{
    [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
});
await DialogService.Show(op);</Pre>

<DemoBlock Title="基本用法" Introduction="通过设置 <code>DialogOption</code> 属性对模态框进行基本属性设置" Name="Keyboard">
    <div>
        <p>通过设置 <code>DialogOption</code> <code>IsKeyboard</code> 参数,开启弹窗是否支持 <kbd>ESC</kbd>,请点击后面按钮设置后再点击 <b>弹窗</b> 按钮测试效果</p>
        <Button OnClick="@OnClick">点击打开 Dialog</Button>
        <Button OnClick="@OnClickKeyboard" Text="@($"Keyboard: {IsKeyboard}")" class="ms-3" />
    </div>
</DemoBlock>

<DemoBlock Title="自定义标题栏" Introduction="通过设置 <code>HeaderTemplate</code> 属性对模态框标题栏进行自定义设置" Name="CustomerHeader">
    <div>
        <Button OnClick="@OnCustomerHeaderClick" Text="弹窗" />
    </div>
</DemoBlock>

<DemoBlock Title="弹出复杂组件" Introduction="通过调用 <code>Show<Counter>()</code> 来弹出一个自定义组件" Name="Component">
    <p>
        本例中弹出对话框中包含一个示例网站的自带 <code>Counter</code> 组件
    </p>
    <Button @onclick="@OnClickCounter">点击打开 Dialog</Button>
</DemoBlock>

<DemoBlock Title="弹窗传参" Introduction="通过设置 <code>BodyContext</code> 属性值,可以把参数传递给弹窗中的组件内" Name="BodyContext">
    <p>
        本例中点击按钮时设置 <code>BodyContext</code> 值为 <code>我是传参</code>,弹窗内容为自定义组件 <code>DemoComponent</code>,组件内通过级联参数获取到其值
    </p>
    <Button @onclick="@OnClickParameter">Dialog 传参示例</Button>
</DemoBlock>

<DemoBlock Title="实战应用" Introduction="本例中通过传递一个主键,在弹窗内的组件通过此主键进行数据查询,并将结果显示在弹窗内" Name="Apply">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select @bind-Value="@DataPrimaryId" DisplayText="主键参数" ShowLabel="true">
                <Options>
                    <SelectOption Text="1" Value="1"></SelectOption>
                    <SelectOption Text="2" Value="2"></SelectOption>
                    <SelectOption Text="3" Value="3"></SelectOption>
                    <SelectOption Text="4" Value="4"></SelectOption>
                    <SelectOption Text="5" Value="5"></SelectOption>
                    <SelectOption Text="6" Value="6"></SelectOption>
                    <SelectOption Text="7" Value="7"></SelectOption>
                    <SelectOption Text="8" Value="8"></SelectOption>
                    <SelectOption Text="9" Value="9"></SelectOption>
                    <SelectOption Text="10" Value="10"></SelectOption>
                </Options>
            </Select>
        </div>
        <div class="col-12 col-sm-6 align-self-end">
            <Button @onclick="@OnClickShowDataById">弹窗</Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="代码关闭弹窗" Introduction="本例讲解如何通过代码打开与关闭弹窗" Name="CloseDialogByCode">
    <p>利用弹窗参数 <code>DialogOption</code> 实例,弹窗弹出后实例中的 <code>Dialog</code> 属性值即为当前弹窗句柄,通过调用其 <code>Toggle/Close</code> 方法即可关闭弹窗</p>

    <Button @onclick="@Show">Dialog</Button>
</DemoBlock>

<DemoBlock Title="禁用 Header 中的关闭按钮" Introduction="本例讲解如何通过代码打开与关闭弹窗" Name="DisableHeaderCloseButton">
    <p>设置参数 <code>ShowHeaderCloseButton</code> 禁止弹窗 <code>Header</code> 右侧显示 <b>关闭</b> 按钮</p>

    <Button @onclick="@ShowNoHeaderCloseButtonDialog">Dialog</Button>
</DemoBlock>

<DemoBlock Title="多级弹窗" Introduction="点击弹窗内部按钮继续弹出对话窗" Name="MultipleDialog">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出对话窗</li>
        <li>切换弹窗内 <code>Tab</code> 组件的第三个标签页 <b>角色管理</b></li>
        <li>点击标签页中的弹窗继续弹出对话框</li>
        <li>关闭当前对话框后之前打开的对话框 <b>保持状态</b></li>
    </ul>

    <Button OnClick="@ShowDialogLoop">弹窗</Button>
</DemoBlock>

<DemoBlock Title="模态对话框" Introduction="通过 <code>ShowModal</code> 方法弹出线程阻塞模式的对话框" Name="ModalDialog">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出模态弹窗</li>
        <li>更改模态弹窗内数值点击 <code>确认</code> 按钮时数值 <b>更新</b></li>
        <li>更改模态弹窗内数值点击 <code>取消</code> 或者 <code>关闭</code> 按钮时数值 <b>不更新</b></li>
        <li>再次点击弹出模态弹窗时,数值保持一致</li>
    </ul>
    <Button OnClick="@OnResultDialogClick">点击打开 Dialog</Button>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="编辑对话框" Introduction="通过 <code>ShowEditDialog</code> 方法弹出保存对话框" Name="EditDialog">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出编辑弹窗</li>
        <li>通过 <code>EditDialogOption</code> 参数对弹窗进行设置</li>
        <li>设计出发点通过给定 <code>Model</code> 或者 <code>Items</code> 自动生成带客户端验证的表单窗口</li>
    </ul>
    <Button OnClick="@OnEditDialogClick">编辑弹窗</Button>
</DemoBlock>

<DemoBlock Title="搜索对话框" Introduction="通过 <code>ShowSearchDialog</code> 方法弹出保存对话框" Name="SearchDialog">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出搜索弹窗</li>
        <li>通过 <code>SearchDialogOption</code> 参数对弹窗进行设置</li>
        <li>设计出发点通过给定 <code>Model</code> 或者 <code>Items</code> 自动生成搜索窗口</li>
    </ul>
    <Button OnClick="@OnSearchDialogClick">搜索弹窗</Button>
</DemoBlock>

<DemoBlock Title="保存对话框" Introduction="通过 <code>ShowSaveDialog</code> 方法弹出保存对话框" Name="SaveDialog">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出保存弹窗</li>
        <li>设计出发点通过给定 <code>TComponent</code> 自动生成保存窗口,通过设置 <code>saveCallback</code> 在保存回调方法中进行数据处理,<code>TComponent</code> 泛型组件所需要参数可以通过 <code>parameters</code> 进行传递</li>
    </ul>
    <Button OnClick="@OnSaveDialogClick">保存弹窗</Button>
</DemoBlock>

<DemoBlock Title="对话框大小" Introduction="通过设置 <code>Size</code> <code>FullScreenSize</code> 参数组合可以实现非常灵活的窗体大小控制" Name="ModalDialog">
    <Button OnClick="@OnSizeDialogClick">全屏弹窗(< 1200px)</Button>
</DemoBlock>

<DemoBlock Title="打印按钮" Introduction="通过设置 <code>ShowPrintButton</code> 使 <code>Header</code> 上显示一个打印预览按钮" Name="PrintDialog">
    <p>通过设置 <code>@nameof(DialogOption.PrintButtonText)</code> 更改 <b>打印预览</b> 按钮文字</p>
    <Button OnClick="@OnPrintDialogClick">点击打开 Dialog</Button>
</DemoBlock>

<DemoBlock Title="全屏弹窗" Introduction="通过设置 <code>ShowMaximizeButton</code> 使 <code>Header</code> 上显示一个窗口最大化按钮" Name="PrintDialog">
    <Button OnClick="@OnMaximizeDialogClick">点击打开 Dialog</Button>
</DemoBlock>

<DemoBlock Title="实战演练" Introduction="模拟一个邮件应用,弹窗选择收件人后填入下方的收件人框。" Name="Email">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出模态弹窗</li>
        <li>通过级联传参 <code>BodyContext</code> 传递 <b>10</b> 到弹窗中初始化数据</li>
        <li>选中 <code>Table</code> 组件中的行数据,通过双向绑定对 <code>SelectedRows</code> 数据进行 <b>更新</b></li>
        <li>点击 <b>选中</b> 按钮通过双向绑定对 <code>Emails</code> 数据进行 <b>更新</b></li>
        <li>点击 <code>取消</code> 或者 <code>关闭</code> 按钮时 <code>Emails</code> 值 <b>不更新</b></li>
        <li>再次点击弹出模态弹窗时,组件内行选中状态保持一致</li>
        <li>弹窗中未选择用户时禁止关闭弹窗</li>
    </ul>
    <label class="form-label">收件人:</label>
    <div class="input-group">
        <BootstrapInput PlaceHolder="请输入 ..." Value="@InputValue"></BootstrapInput>
        <Button Icon="fa fa-vcard-o" OnClick="@OnEmailButtonClick"></Button>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" Title="DialogOption 属性" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.Extensions.Localization;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 弹窗组件示例代码
/// </summary>
public sealed partial class Dialogs
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

    /// <summary>
    /// 获得 弹窗注入服务
    /// </summary>
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? Localizer { get; set; }

    private bool IsKeyboard { get; set; }

    private void OnClickKeyboard()
    {
        IsKeyboard = !IsKeyboard;
    }

    private async Task TriggerUpdateBodyAsync(string val)
    {
        if (BodyFooComponent != null)
        {
            await BodyFooComponent.UpdateAsync(val);
        }
    }

    private DialogBodyFoo? BodyFooComponent { get; set; }

    private Task OnCustomerHeaderClick() => DialogService.Show(new DialogOption()
    {
        HeaderTemplate = BootstrapDynamicComponent.CreateComponent<DialogHeaderFoo>(new Dictionary<string, object?>
        {
            [nameof(DialogHeaderFoo.OnValueChanged)] = new Func<string, Task>(val => TriggerUpdateBodyAsync(val))
        }).Render(),
        BodyTemplate = builder =>
        {
            builder.OpenComponent<DialogBodyFoo>(0);
            builder.AddComponentReferenceCapture(1, obj => BodyFooComponent = (DialogBodyFoo)obj);
            builder.CloseComponent();
        },
    });

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private Task OnClick() => DialogService.Show(new DialogOption()
    {
        IsKeyboard = IsKeyboard,
        Title = "我是服务创建的弹出框",
        BodyTemplate = BootstrapDynamicComponent.CreateComponent<Button>(new Dictionary<string, object?>
        {
            [nameof(Button.ChildContent)] = new RenderFragment(builder => builder.AddContent(0, "我是服务创建的按钮"))
        })
        .Render()
    });

    private async Task Show()
    {
        var option = new DialogOption()
        {
            Title = "利用代码关闭弹出框",
        };
        option.BodyTemplate = BootstrapDynamicComponent.CreateComponent<Button>(new Dictionary<string, object?>
        {
            [nameof(Button.Text)] = "点击关闭弹窗",
            [nameof(Button.OnClick)] = EventCallback.Factory.Create<MouseEventArgs>(this, async () => await option.Dialog.Close())
        }).Render();
        await DialogService.Show(option);
    }

    private async Task ShowNoHeaderCloseButtonDialog()
    {
        var option = new DialogOption()
        {
            Title = "Header 中无关闭按钮",
            ShowHeaderCloseButton = false
        };
        option.BodyTemplate = BootstrapDynamicComponent.CreateComponent<Button>(new Dictionary<string, object?>
        {
            [nameof(Button.Text)] = "点击关闭弹窗",
            [nameof(Button.OnClick)] = EventCallback.Factory.Create<MouseEventArgs>(this, async () => await option.Dialog.Close())
        }).Render();
        await DialogService.Show(option);
    }

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private Task OnClickCounter() => DialogService.Show(new DialogOption()
    {
        Title = "自带的 Counter 组件",
        Component = BootstrapDynamicComponent.CreateComponent<Counter>()
    });

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private Task OnClickParameter() => DialogService.Show(new DialogOption()
    {
        Title = "自带的 Counter 组件",
        BodyContext = "我是传参",
        BodyTemplate = builder =>
        {
            var index = 0;
            builder.OpenComponent<DemoComponent>(index++);
            builder.CloseComponent();
        }
    });

    private int DataPrimaryId { get; set; } = 1;

    private async Task OnClickShowDataById()
    {
        var op = new DialogOption()
        {
            Title = "数据查询窗口",
            ShowFooter = false,
            BodyContext = DataPrimaryId
        };
        op.BodyTemplate = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new Dictionary<string, object?>
        {
            [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
        }).Render();

        await DialogService.Show(op);
    }

    private int DemoValue1 { get; set; } = 1;
    private async Task OnResultDialogClick()
    {
        var result = await DialogService.ShowModal<ResultDialogDemo>(new ResultDialogOption()
        {
            Title = "带返回值模态弹出框",
            ComponentParamters = new Dictionary<string, object>
            {
                [nameof(ResultDialogDemo.Value)] = DemoValue1,
                [nameof(ResultDialogDemo.ValueChanged)] = EventCallback.Factory.Create<int>(this, v => DemoValue1 = v)
            }
        });

        Trace.Log($"弹窗返回值为: {result} 组件返回值为: {DemoValue1}");
    }

    private Task OnSizeDialogClick() => DialogService.Show(new DialogOption()
    {
        Title = "全屏窗口",
        FullScreenSize = FullScreenSize.ExtraLarge,
        BodyTemplate = builder => builder.AddContent(0, "屏幕小于 1200px 时全屏显示")
    });

    private async Task OnPrintDialogClick()
    {
        var op = new DialogOption()
        {
            Title = "数据查询窗口",
            ShowPrintButton = true,
            ShowPrintButtonInHeader = true,
            ShowFooter = false,
            BodyContext = DataPrimaryId
        };
        op.BodyTemplate = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new Dictionary<string, object?>
        {
            [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
        }).Render();

        await DialogService.Show(op);
    }

    private async Task OnMaximizeDialogClick()
    {
        await DialogService.Show(new DialogOption()
        {
            Title = $"可控制最大化弹窗",
            ShowMaximizeButton = true,
            BodyTemplate = builder =>
            {
                builder.AddContent(0, "点击 Header 中最大化按钮弹窗可全屏");
            }
        });
    }

    private string? InputValue { get; set; }

    private IEnumerable<string> Emails { get; set; } = Array.Empty<string>();

    private async Task OnEmailButtonClick()
    {
        var result = await DialogService.ShowModal<ResultDialogDemo2>(new ResultDialogOption()
        {
            Title = "选择收件人",
            BodyContext = new ResultDialogDemo2.FooContext() { Count = 10, Emails = InputValue },
            ButtonYesText = "选择",
            ButtonYesIcon = "fa fa-search",
            ComponentParamters = new Dictionary<string, object>
            {
                // 用于初始化已选择的用户邮件
                [nameof(ResultDialogDemo2.Emails)] = Emails,
                [nameof(ResultDialogDemo2.EmailsChanged)] = EventCallback.Factory.Create<IEnumerable<string>>(this, v => Emails = v)
            }
        });

        if (result == DialogResult.Yes)
        {
            InputValue = string.Join(";", Emails);
        }
    }

    private async Task ShowDialogLoop()
    {
        await DialogService.Show(new DialogOption()
        {
            Title = $"弹窗 {DateTime.Now}",
            Component = BootstrapDynamicComponent.CreateComponent<DialogDemo>()
        });
    }

    private async Task OnEditDialogClick()
    {
        var option = new EditDialogOption<Foo>()
        {
            Title = "编辑弹窗",
            Model = new Foo(),
            RowType = RowType.Inline,
            ItemsPerRow = 2,
            ItemChangedType = ItemChangedType.Update
        };
        await DialogService.ShowEditDialog(option);
    }

    private async Task OnSearchDialogClick()
    {
        var option = new SearchDialogOption<Foo>()
        {
            Title = "搜索弹窗",
            Model = new Foo(),
            RowType = RowType.Inline,
            ItemsPerRow = 2,
        };
        await DialogService.ShowSearchDialog(option);
    }

    private async Task OnSaveDialogClick()
    {
        var foo = Foo.Generate(Localizer);
        await DialogService.ShowSaveDialog<DialogSaveDetail>("保存", () =>
        {
            // 此处可以访问 foo 实例进行入库操作等
            return Task.FromResult(true);
        }, parameters =>
        {
            parameters.Add(nameof(DialogSaveDetail.Value), foo);
        });
    }

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "Component",
            Description = "对话框 Body 中引用的组件的参数",
            Type = "DynamicComponent",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "BodyContext",
            Description = "弹窗传参",
            Type = "object",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "HeaderTemplate",
            Description = "模态主体 ModalHeader 模板",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "BodyTemplate",
            Description = "模态主体 ModalBody 组件",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "FooterTemplate",
            Description = "模态底部 ModalFooter 组件",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "IsCentered",
            Description = "是否垂直居中",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "IsScrolling",
            Description = "是否弹窗正文超长时滚动",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "ShowCloseButton",
            Description = "是否显示关闭按钮",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowHeaderCloseButton",
            Description = "是否显示标题栏右侧关闭按钮",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowFooter",
            Description = "是否显示 Footer",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.ShowPrintButton),
            Description = "是否显示打印按钮",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.ShowPrintButtonInHeader),
            Description = "打印按钮是否显示在 Header 中",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Size",
            Description = "尺寸",
            Type = "Size",
            ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
            DefaultValue = "Large"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.FullScreenSize),
            Description = "小于特定尺寸时全屏",
            Type = "Size",
            ValueList = "None / Always / Small / Medium / Large / ExtraLarge",
            DefaultValue = "None"
        },
        new AttributeItem() {
            Name = "Title",
            Description = "弹窗标题",
            Type = "string",
            ValueList = " — ",
            DefaultValue = " 未设置 "
        },
        new AttributeItem() {
            Name = nameof(DialogOption.PrintButtonText),
            Description = "打印按钮显示文字",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "资源文件中设定值"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.ShowMaximizeButton),
            Description = "是否显示最大化按钮",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        }
    };
}

B 站相关视频链接

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor 组件库 更新到 6.6.0

首先感谢您对本套组件的关注,本目前本套组件已经拥有超过 120 个组件,本组件是基于 Bootstrap 风格的 Blazor 企业级组件库,提供如布局、导航、表单、数据、通知、图标、语音等几大类通用组件,每一个组件都经过静心设计,具有模块化、响应式和优秀的性能。从更多实际场景出发,满足多种场景的需求,极大的减少开发者时间成本,大大缩短开发周期,大幅提高开发效率,并提供了一套 通用权限管理系统 示例工程。Bootstrap Blazor 产品是由一支专业的全职技术团队进行维护,高效的响应速度,多元化的解决方案,长期提供支持,并提供企业级支持。目前已在多家知名国企内部使用,项目最高在线 1200 人稳定运行。右侧为国内人数最多的中文 Blazor QQ 社区二维码,欢迎扫描加群。

组件更新到 6.6.0 更新日志 [传送门] 如果组件给您带来了方便,请您帮忙给项目点亮 Star github gitee

QQGroup
QQ 795206915