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

Modal box

Inform the user and host relevant actions while preserving the current page state

A dialog box pops up, suitable for scenarios that require more customization

Demo

by setting Modal component IsKeyboard parameter, whether to open the pop-up window is supported ESC, Please click the back button to set and then click the popup button to test the effect

Click the area outside the pop-up window to close the pop-up window effect by default

Demo

Set the size of the popup component through Size

Demo

Just set the property FullScreenSize

Demo

Set the vertical centering of the popup component via IsCentered

Demo

Use IsScrolling to set the scroll wheel sliding function of the pop-up frame component for the excess content

Demo

Click on the title bar of the pop-up window to drag and drop the pop-up window

Demo

Show the maximize button by setting the ShowMaximinzeButton popup

Demo

通过设置 ShownCallbackAsync 回调委托,弹窗显示后回调此方法

Demo

Attributes

Loading...
@page "/modals"
@inject IStringLocalizer<Modals> Localizer

<h3>Modal box</h3>
<h4>Inform the user and host relevant actions while preserving the current page state</h4>

<DemoBlock Title="Basic usage" Introduction="A dialog box pops up, suitable for scenarios that require more customization" Name="Normal">
    <div class="modal d-block position-relative" style="z-index: 2;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Popup title</h5>
                    <button type="button" class="btn-close" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>popup text</p>
                </div>
                <div class="modal-footer">
                    <Button Color="Color.Secondary" Text="Close" Icon="fa-solid fa-xmark"></Button>
                    <Button Text="Save" Icon="fa-solid fa-floppy-disk"></Button>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-3">
        <p>by setting <code>Modal</code> component <code>IsKeyboard</code> parameter, whether to open the pop-up window is supported <kbd>ESC</kbd>, Please click the back button to set and then click the <b>popup</b> button to test the effect</p>
        <Button OnClick="() => Modal.Toggle()">Pop-ups</Button>
        <Button OnClick="OnClickKeyboard" Text="@($"Keyboard: {IsKeyboard}")" class="ms-3" />
    </div>
    <Modal @ref="Modal" IsKeyboard="@IsKeyboard">
        <ModalDialog Title="Default popup">
            <BodyTemplate>
                <div>I am the text in the pop-up window</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="IsBackdrop background off mode" Introduction="Click the area outside the pop-up window to close the pop-up window effect by default" Name="IsBackdrop">
    <Button OnClick="() => BackdropModal.Toggle()">Pop-ups</Button>
    <Modal @ref="BackdropModal" IsBackdrop="true">
        <ModalDialog Title="Click on the background to close the popup">
            <BodyTemplate>
                <div>I am the text in the pop-up window</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="Bullet size" Introduction="Set the size of the popup component through <code>Size</code>" Name="DialogSize">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => SmailModal.Toggle()">small popup</Button>
            <Modal @ref="SmailModal">
                <ModalDialog Size="Size.Small" Title="small popup">
                    <BodyTemplate>
                        <div>I am the text in the pop-up window</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => LargeModal.Toggle()">big popup</Button>
            <Modal @ref="LargeModal">
                <ModalDialog Size="Size.Large" Title="big popup">
                    <BodyTemplate>
                        <div>I am the text in the pop-up window</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => ExtraLargeModal.Toggle()">Oversized pop-up window</Button>
            <Modal @ref="ExtraLargeModal">
                <ModalDialog Size="Size.ExtraLarge" Title="Oversized pop-up window">
                    <BodyTemplate>
                        <div>I am the text in the pop-up window</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => ExtraExtraLargeModal.Toggle()">super large pop-up window</Button>
            <Modal @ref="ExtraExtraLargeModal">
                <ModalDialog Size="Size.ExtraExtraLarge" Title="super large pop-up window">
                    <BodyTemplate>
                        <div>I am the text in the pop-up window</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Full screen popup" Introduction="Just set the property <code>FullScreenSize</code>" Name="FullScreenSize">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => SmailFullScreenModal.Toggle()">Full screen popup</Button>
            <Modal @ref="SmailFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.Always" Title="Full screen popup">
                    <BodyTemplate>
                        <div>I am the text in the pop-up window</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => LargeFullScreenModal.Toggle()">Full screen popup(<992px)</Button>
            <Modal @ref="LargeFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.Large" Title="Large full screen popup">
                    <BodyTemplate>
                        <div>I am the text in the pop-up window</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => ExtraLargeFullScreenModal.Toggle()">Full screen popup(<1200px)</Button>
            <Modal @ref="ExtraLargeFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.ExtraLarge" Title="Large full-screen pop-up window">
                    <BodyTemplate>
                        <div>I am the text in the pop-up window</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => ExtraExtraLargeFullScreenModal.Toggle()">Full screen popup(<1400px)</Button>
            <Modal @ref="ExtraExtraLargeFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.ExtraExtraLarge" Title="Super large full-screen pop-up window">
                    <BodyTemplate>
                        <div>I am the text in the pop-up window</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Center vertically" Introduction="Set the vertical centering of the popup component via <code>IsCentered</code>" Name="CenterVertically">
    <Button OnClick="() => CenterModal.Toggle()">Vertically centered popup</Button>
    <Modal @ref="CenterModal">
        <ModalDialog IsCentered="true" Title="Vertically centered popup">
            <BodyTemplate>
                <div>I am the text in the pop-up window</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="Extra long content" Introduction="Use <code>IsScrolling</code> to set the scroll wheel sliding function of the pop-up frame component for the excess content" Name="LongContent">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => LongContentModal.Toggle()">Pop-up window with very long content</Button>
            <Modal @ref="LongContentModal">
                <ModalDialog IsCentered="true" Title="Pop-up window with very long content">
                    <BodyTemplate>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => ScrollModal.Toggle()">Built-in scroll bar popup</Button>
            <Modal @ref="ScrollModal">
                <ModalDialog IsCentered="true" IsScrolling="true" Title="Built-in scroll bar popup">
                    <BodyTemplate>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Draggable popup" Introduction="Click on the title bar of the pop-up window to drag and drop the pop-up window" Name="IsDraggable">
    <Button OnClick="() => DragModal.Toggle()">Pop-ups</Button>
    <Modal @ref="DragModal">
        <ModalDialog Title="Default popup" IsDraggable="true" ShowMaximizeButton="true">
            <BodyTemplate>
                <div>I am the text in the pop-up window</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="Maximize button" Introduction="Show the maximize button by setting the <code>ShowMaximinzeButton</code> popup" Name="Maximize">
    <Button OnClick="() => MaximizeModal.Toggle()">Pop-ups</Button>
    <Modal @ref="MaximizeModal">
        <ModalDialog Title="Maximize popup" ShowMaximizeButton="true">
            <BodyTemplate>
                <div>I am the text in the pop-up window</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="弹窗已显示回调方法" Introduction="通过设置 <code>ShownCallbackAsync</code> 回调委托,弹窗显示后回调此方法" Name="ShownCallbackAsync">
    <Button OnClick="() => ShownCallbackModal.Toggle()">弹窗</Button>
    <Modal @ref="ShownCallbackModal" OnShownAsync="OnShownCallbackAsync">
        <ModalDialog Title="ShownCallbackAsync 回调示例">
            <BodyTemplate>
                <div>我是弹窗内正文</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
// 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/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Modals
{
    [NotNull]
    private Modal? Modal { get; set; }

    [NotNull]
    private Modal? BackdropModal { get; set; }

    [NotNull]
    private Modal? SmailModal { get; set; }

    [NotNull]
    private Modal? LargeModal { get; set; }

    [NotNull]
    private Modal? ExtraLargeModal { get; set; }

    [NotNull]
    private Modal? ExtraExtraLargeModal { get; set; }

    [NotNull]
    private Modal? SmailFullScreenModal { get; set; }

    [NotNull]
    private Modal? LargeFullScreenModal { get; set; }

    [NotNull]
    private Modal? ExtraLargeFullScreenModal { get; set; }

    [NotNull]
    private Modal? ExtraExtraLargeFullScreenModal { get; set; }

    [NotNull]
    private Modal? CenterModal { get; set; }

    [NotNull]
    private Modal? LongContentModal { get; set; }

    [NotNull]
    private Modal? ScrollModal { get; set; }

    [NotNull]
    private Modal? DragModal { get; set; }

    [NotNull]
    private Modal? MaximizeModal { get; set; }

    [NotNull]
    private Modal? ShownCallbackModal { get; set; }

    private bool IsKeyboard { get; set; }

    [NotNull]
    private BlockLogger? Trace { get; set; }

    private Task OnShownCallbackAsync()
    {
        Trace.Log("弹窗已显示");
        return Task.CompletedTask;
    }

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

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "FirstAfterRenderCallbackAsync",
            Description = "Modal first after render callback",
            Type = "Func<Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "HeaderTemplate",
            Description = "Modal body ModalHeader template",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "BodyTemplate",
            Description = "Modal body ModalBody component",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "ChildContent",
            Description = "Content",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "FooterTemplate",
            Description = "ModalFooter component at the bottom of the modal",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "IsBackdrop",
            Description = "Whether to close the popup in the background",
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsKeyboard",
            Description = "Whether to respond to ESC keyboard",
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "IsCentered",
            Description = "Whether to center vertically",
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "IsScrolling",
            Description = "Whether to scroll when the text of the pop-up window is too long",
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsFade",
            Description = "Whether to enable the fade-in and fade-out animation effect",
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "IsDraggable",
            Description = "Whether to enable the draggable effect",
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "ShowCloseButton",
            Description = "whether to show the close button",
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowFooter",
            Description = "Whether to show Footer",
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "Size",
            Description = "Size",
            Type = "Size",
            ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge / ExtraExtraLarge",
            DefaultValue = "ExtraExtraLarge"
        },
        new AttributeItem() {
            Name = nameof(ModalDialog.FullScreenSize),
            Description = "Full screen when smaller than a certain size",
            Type = "Size",
            ValueList = "None / Always / Small / Medium / Large / ExtraLarge / ExtraExtraLarge",
            DefaultValue = "None"
        },
        new AttributeItem() {
            Name = "Title",
            Description = "Popup title",
            Type = "string",
            ValueList = " — ",
            DefaultValue = " not set "
        },
        new AttributeItem() {
            Name = nameof(ModalDialog.ShowMaximizeButton),
            Description = "Whether to show the popup maximize button",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "ShownCallbackAsync",
            Description = "弹窗已显示回调方法",
            Type = "Func<Task>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}

B station related video link

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
img
Themes
Bootstrap
Motronic
Ant Design (完善中)
DevUI (制作中)
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 Component library updated to 7.0.8-beta05

Bootstrap Blazor at present has more than 120 components. This component is based on Bootstrap Blazor An enterprise-level component library that provides several types of common components such as layout, navigation, form, data, notification, icon, voice, etc. Each component has been carefully designed with modularity, responsiveness and excellent performance. Starting from more practical scenarios, meeting the needs of various scenarios, greatly reducing the time cost of developers, greatly shortening the development cycle, greatly improving development efficiency, and providing a set of General Rights Management System Example project。Bootstrap Blazor Products are maintained by a professional full-time technical team, with efficient response speed, diversified solutions, long-term support, and enterprise-level support. At present, it has been used in many well-known state-owned enterprises, and the project is running stably with a maximum of 1200 people online. On the right is the QR code of the Chinese Blazor QQ community with the largest number of people in China, welcome to scan and join the group.

component updated to 6.6.0 Change log [portal] If the component brings you convenience, please help to light up the project Star github gitee

QQGroup
QQ 795206915