!245 doc(#I1LCXB): Table 组件增加自定义扩展按钮示例

* doc: 更新 Table 组件属性表格 * doc: 增加自定义扩展按钮示例 * Merge branch 'dev-input' into dev * Merge branch 'dev-doc' into dev * release: 发布 3.1.9-beta02 * feat: 调整 Input 控件显示标签逻辑 * doc: 完善 DialogOption 文档 * doc: 增加 ListView 分组示例文件 * !244 feat(#I1L6KX): ListView 组件增加分组功能 * !243 feat(#I1KZYT): 增加 Search 组件 * Merge branch 'dev' into publish * !242 doc(#I1LBAW): Layout 组件示例文档显示 Footer * !241 fix(#I1LBB4): 修复 Editor 组件双向绑定是报错 * doc: Layout 组件示例代码增加 Footer 显示 * fix: 修复 Editor 双向绑定时报错 * fix: 增加 Editor 组件数值初始化功能 * !240 doc: 更新 Modal 文档 * !239 feat(#I1L909): Editor 组件支持双向绑定 * !238 feat(#I1L8WV): Console 组件增强 * !237 fix(#I1L8VS): wasm 工程增加可调式配置项 * !236 feat(#I1L81C): 增加 Round 与 Circle 风格的 Button 设置 * fix: namespace * fix: 完善部分细节 * fix: 修复代码demo * feat: 新增 round / circle 两种风格按钮
2024-12-06 22:19:48 +08:00 · 2020-06-22 12:49:13 +08:00 · 2020-06-22 12:49:13 +08:00 · 24a953eb23
commit 24a953eb23
parent c27a36f88f
56 changed files with 689 additions and 119 deletions
--- a/dist/404.html
+++ b/dist/404.html
@ -16,7 +16,7 @@
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
-    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.css">
+    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
@ -62,7 +62,7 @@
    <script src="_content/BootstrapBlazor/lib/jquery/jquery.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
-    <script src="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.js"></script>
+    <script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/button/button.7.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/button/button.7.html
@ -0,0 +1,6 @@
+<Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">主要按钮</Button>
+<Button ButtonStyle="ButtonStyle.Round" Color="Color.Secondary">次要按钮</Button>
+<Button ButtonStyle="ButtonStyle.Round" Color="Color.Success">成功按钮</Button>
+<Button ButtonStyle="ButtonStyle.Round" Color="Color.Danger">危险按钮</Button>
+<Button ButtonStyle="ButtonStyle.Round" Color="Color.Warning">警告按钮</Button>
+<Button ButtonStyle="ButtonStyle.Circle" Icon="fa fa-fw fa-cubes"></Button>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/console/console.1.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/console/console.1.html
@ -1 +1 @@
-<Console Items="@Messages" />
+<Console Items="@Messages" Height="126" />
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/console/console.2.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/console/console.2.html
@ -1 +1 @@
-<Console Items="@Messages" OnClear="@OnClear" />
+<Console Items="@Messages" Height="126" OnClear="@OnClear" />
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/editor/editor.5.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/editor/editor.5.html
@ -0,0 +1,8 @@
+<Editor @bind-Value="@EditorValue"></Editor>
+
+<label class="control-label mt-3">显示编辑内容：</label>
+<textarea class="form-control mt-3" readonly="readonly" disabled="disabled">@EditorValue</textarea>
+
+@code {
+    private string EditorValue { get; set; } = "";
+}
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/layout/layout.1.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/layout/layout.1.html
@ -1,4 +1,4 @@
-<Layout>
+<Layout ShowFooter="true">
    <Header>
        <div class="text-center header">Header</div>
    </Header>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/layout/layout.2.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/layout/layout.2.html
@ -1,4 +1,4 @@
-<Layout>
+<Layout ShowFooter="true">
    <Header>
        <div class="text-center header">Header</div>
    </Header>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/layout/layout.3.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/layout/layout.3.html
@ -1,4 +1,4 @@
-<Layout IsFullSide="true">
+<Layout ShowFooter="true" IsFullSide="true">
    <Header>
        <div class="text-center header">Header</div>
    </Header>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/layout/layout.4.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/layout/layout.4.html
@ -1,4 +1,4 @@
-<Layout SideWidth="200">
+<Layout ShowFooter="true" SideWidth="200">
    <Header>
        <div class="text-center header">Header</div>
    </Header>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/layout/layout.5.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/layout/layout.5.html
@ -23,7 +23,7 @@
    本例点击左侧菜单展开后不出现滚动条会撑开父容器高度
 </p>
 <div style="width: 100%; border: 1px solid rgba(0,0,0,.125);">
-    <Layout SideWidth="160px">
+    <Layout ShowFooter="true" SideWidth="160px">
        <Header>
            <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
        </Header>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/listview/listview.3.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/listview/listview.3.html
@ -0,0 +1,63 @@
+<ListView TItem="Product" GroupName="@(p => p.Category)" OnQueryAsync="@OnQueryAsync">
+    <HeaderTemplate>
+        <div>产品列表</div>
+    </HeaderTemplate>
+    <BodyTemplate>
+        <Card>
+            <CardBody>
+                <img src="@context.ImageUrl" />
+                <div class="listview-demo-desc">@context.Description</div>
+            </CardBody>
+        </Card>
+    </BodyTemplate>
+</ListView>
+
+@code {
+    /// <summary>
+    /// 
+    /// </summary>
+    public sealed partial class ListViews
+    {
+        private IEnumerable<Product> Products { get; set; } = Enumerable.Empty<Product>();
+
+        /// <summary>
+        /// 
+        /// </summary>
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            Products = Enumerable.Range(1, 100).Select(i => new Product()
+            {
+                ImageUrl = $"https://imgs.sdgxgz.com/images/Pic{i}.jpg",
+                Description = $"Pic{i}.jpg"
+            });
+        }
+
+        private Task<QueryData<Product>> OnQueryAsync(QueryPageOptions options)
+        {
+            var items = Products.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems);
+            return Task.FromResult(new QueryData<Product>()
+            {
+                Items = items,
+                TotalCount = Products.Count()
+            });
+        }
+    }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    internal class Product
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        public string ImageUrl { get; set; } = "";
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public string Description { get; set; } = "";
+    }
+}
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/modal/modal.1.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/modal/modal.1.html
@ -1,5 +1,5 @@
 <Button @onclick="e => Modal?.ToggleAsync()">弹窗</Button>
-<Modal @ref="Modal" Title="默认弹窗">
+<Modal @ref="Modal">
    <ModalDialog Title="默认弹窗">
        <BodyTemplate>
            <div>我是弹窗内正文</div>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/modal/modal.2.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/modal/modal.2.html
@ -1,6 +1,6 @@
 <Button @onclick="e => BackdropModal?.ToggleAsync()">弹窗</Button>
-<Modal @ref="BackdropModal" IsBackdrop="true" Title="点击背景可关闭弹窗">
-    <ModalDialog Title="默认弹窗">
+<Modal @ref="BackdropModal" IsBackdrop="true">
+    <ModalDialog Title="点击背景可关闭弹窗">
        <BodyTemplate>
            <div>我是弹窗内正文</div>
        </BodyTemplate>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/modal/modal.3.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/modal/modal.3.html
@ -1,22 +1,22 @@
 <Button @onclick="e => SmailModal?.ToggleAsync()">小弹窗</Button>
-<Modal @ref="SmailModal" Size="Size.Small" Title="小弹窗">
-    <ModalDialog Title="默认弹窗">
+<Modal @ref="SmailModal">
+    <ModalDialog Size="Size.Small" Title="小弹窗">
        <BodyTemplate>
            <div>我是弹窗内正文</div>
        </BodyTemplate>
    </ModalDialog>
 </Modal>
 <Button @onclick="e => LargeModal?.ToggleAsync()">大弹窗</Button>
-<Modal @ref="LargeModal" Size="Size.Large" Title="大弹窗">
-    <ModalDialog Title="默认弹窗">
+<Modal @ref="LargeModal">
+    <ModalDialog Size="Size.Large" Title="大弹窗">
        <BodyTemplate>
            <div>我是弹窗内正文</div>
        </BodyTemplate>
    </ModalDialog>
 </Modal>
 <Button @onclick="e => ExtraLargeModal?.ToggleAsync()">超大弹窗</Button>
-<Modal @ref="ExtraLargeModal" Size="Size.ExtraLarge" Title="超大弹窗">
-    <ModalDialog Title="默认弹窗">
+<Modal @ref="ExtraLargeModal">
+    <ModalDialog Size="Size.ExtraLarge" Title="超大弹窗">
        <BodyTemplate>
            <div>我是弹窗内正文</div>
        </BodyTemplate>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/modal/modal.4.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/modal/modal.4.html
@ -1,6 +1,6 @@
 <Button @onclick="e => CenterModal?.ToggleAsync()">垂直居中的弹窗</Button>
-<Modal @ref="CenterModal" IsCentered="true" Title="垂直居中的弹窗">
-    <ModalDialog Title="默认弹窗">
+<Modal @ref="CenterModal">
+    <ModalDialog IsCentered="true" Title="垂直居中的弹窗">
        <BodyTemplate>
            <div>我是弹窗内正文</div>
        </BodyTemplate>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/modal/modal.5.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/modal/modal.5.html
@ -1,6 +1,6 @@
 <Button @onclick="e => LongContentModal?.ToggleAsync()">内容超长的弹窗</Button>
-<Modal @ref="LongContentModal" IsCentered="true" Title="内容超长的弹窗">
-    <ModalDialog Title="默认弹窗">
+<Modal @ref="LongContentModal">
+    <ModalDialog IsCentered="true" Title="内容超长的弹窗">
        <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>
@ -25,8 +25,8 @@
 </Modal>
           
 <Button @onclick="e => ScrollModal?.ToggleAsync()">内置滚动条弹窗</Button>
-<Modal @ref="ScrollModal" IsCentered="true" IsScrolling="true" Title="内置滚动条弹窗" >
-    <ModalDialog Title="默认弹窗">
+<Modal @ref="ScrollModal">
+    <ModalDialog IsCentered="true" IsScrolling="true" Title="内置滚动条弹窗">
        <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>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/search/search.1.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/search/search.1.html
@ -0,0 +1,12 @@
+<Search IgnoreCase="true" IsLikeMatch="true" PlaceHolder="搜索示例" Items="@Items" OnSearch="@OnSearch"></Search>
+
+@code {
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <param name="searchText"></param>
+    private Task OnSearch(string searchText)
+    {
+        return Task.CompletedTask;
+    }
+}
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/table/table.13.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/table/table.13.html
@ -0,0 +1,14 @@
+<Table TItem="BootstrapBlazor.Shared.Pages.BindItem"
+       IsPagination="true" PageItemsSource="@PageItemsSource"
+       IsStriped="true" IsBordered="true"
+       ShowToolbar="true" ShowDefaultButtons="false" ShowSearch="true" ShowCheckbox="true" ShowExtendButtons="false"
+       OnQueryAsync="@OnQueryAsync">
+    <TableToolbarTemplate>
+        <TableToolbarButton Color="Color.Primary" ButtonIcon="fa fa-fw fa-download" ButtonText="下载" />
+    </TableToolbarTemplate>
+    <TableColumns>
+        <TableColumn @bind-Field="@context.DateTime" Sortable="true" />
+        <TableColumn @bind-Field="@context.Name" Sortable="true" />
+        <TableColumn @bind-Field="@context.Address" Sortable="true" />
+    </TableColumns>
+</Table>
--- a/src/BootstrapBlazor.Server/Pages/_Host.cshtml
+++ b/src/BootstrapBlazor.Server/Pages/_Host.cshtml
@ -21,7 +21,7 @@
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
-    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.css">
+    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
@ -47,7 +47,7 @@
    <script src="_content/BootstrapBlazor/lib/jquery/jquery.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
-    <script src="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.js"></script>
+    <script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
--- a/src/BootstrapBlazor.Shared/Pages/AutoCompletes.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/AutoCompletes.razor.cs
@ -66,15 +66,15 @@ namespace BootstrapBlazor.Shared.Pages
                Name = "IsLikeMatch",
                Description = "是否开启模糊匹配",
                Type = "bool",
-                ValueList = "true | false",
+                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem()
            {
-                Name="IgnoreCase",
-                Description="匹配时是否忽略大小写",
-                Type="bool",
-                ValueList="true | false",
+                Name = "IgnoreCase",
+                Description = "匹配时是否忽略大小写",
+                Type = "bool",
+                ValueList = "true|false",
                DefaultValue = "true"
            },
        };
--- a/src/BootstrapBlazor.Shared/Pages/Buttons.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Buttons.razor
@ -21,6 +21,32 @@
    <Logger @ref="Trace" class="mt-3" />
 </Block>

+<Block Title="不同风格" Introduction="通过设置 <code>ButtonStyle</code> 来显示不同的按钮风格" CodeFile="button.7.html">
+    <div class="form-inline">
+        <div class="row">
+            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
+                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">主要按钮</Button>
+            </div>
+            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
+                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Secondary">次要按钮</Button>
+            </div>
+            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
+                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Success">成功按钮</Button>
+            </div>
+            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
+                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Danger">危险按钮</Button>
+            </div>
+            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
+                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Warning">警告按钮</Button>
+            </div>
+            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
+                <Button ButtonStyle="ButtonStyle.Circle" Icon="fa fa-fw fa-cubes">
+                </Button>
+            </div>
+        </div>
+    </div>
+</Block>
+
 <Block Title="Outline 按钮" Introduction='通过设置 <code>IsOutline="true"</code> 设置按钮边框颜色样式。' CodeFile="button.2.html">
    <div class="form-inline">
        <div class="row">
--- a/src/BootstrapBlazor.Shared/Pages/Buttons.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Buttons.razor.cs
@ -114,6 +114,13 @@ namespace BootstrapBlazor.Shared.Pages
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "ButtonStyle",
+                Description = "按钮风格",
+                Type = "ButtonStyle",
+                ValueList = "None / Circle / Round",
+                DefaultValue = "None"
            }
        };

--- a/src/BootstrapBlazor.Shared/Pages/Coms.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Coms.razor
@ -61,6 +61,7 @@
            <ComponentCard HeaderText="折叠 Collapse" ImageName="Collapse.svg" Url="collapses"></ComponentCard>
            <ComponentCard HeaderText="列表组件 ListView" ImageName="ListView.png" Url="listviews"></ComponentCard>
            <ComponentCard HeaderText="弹出框 Popover" ImageName="Popover.svg" Url="popovers"></ComponentCard>
+            <ComponentCard HeaderText="搜索框 Search" ImageName="Search.png" Url="searchs"></ComponentCard>
            <ComponentCard HeaderText="表格 Table" ImageName="Table.svg" Url="tables"></ComponentCard>
            <ComponentCard HeaderText="标签 Tag" ImageName="Tag.svg" Url="tags"></ComponentCard>
            <ComponentCard HeaderText="时间线 Timeline" ImageName="Timeline.svg" Url="timelines"></ComponentCard>
--- a/src/BootstrapBlazor.Shared/Pages/Consoles.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Consoles.razor
@ -5,11 +5,11 @@
 <h4>控制台组件，一般用于后台任务的输出</h4>

 <Block Title="基本用法" Introduction="显示后台推送的消息" CodeFile="console.1.html">
-    <Console Items="@Messages" />
+    <Console Items="@Messages" Height="126" />
 </Block>

 <Block Title="可清空的控制台" Introduction="通过设置 <code>OnClear</code> 回调方法对数据集进行清空操作，由于本例与上例使用相同数据源，会导致上例中数据源更新延时" CodeFile="console.2.html">
-    <Console Items="@Messages" OnClear="@OnClear" />
+    <Console Items="@Messages" Height="126" OnClear="@OnClear" />
 </Block>

 <AttributeTable Items="@GetAttributes()" />
--- a/src/BootstrapBlazor.Shared/Pages/Consoles.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Consoles.razor.cs
@ -83,14 +83,49 @@ namespace BootstrapBlazor.Shared.Pages
                    Description = "组件高度",
                    Type = "int",
                    ValueList = " — ",
-                    DefaultValue = "126"
+                    DefaultValue = "0"
                },
                new AttributeItem(){
                    Name = "OnClear",
                    Description = "组件清屏回调方法",
                    Type = "int",
                    ValueList = " — ",
-                    DefaultValue = "126"
+                    DefaultValue = "0"
+                },
+                new AttributeItem(){
+                    Name = "HeaderText",
+                    Description = "Header 显示文字",
+                    Type = "string",
+                    ValueList = " — ",
+                    DefaultValue = "系统监控"
+                },
+                new AttributeItem(){
+                    Name = "LightTitle",
+                    Description = "指示灯 Title",
+                    Type = "string",
+                    ValueList = " — ",
+                    DefaultValue = "通讯指示灯"
+                },
+                new AttributeItem(){
+                    Name = "ClearButtonText",
+                    Description = "按钮显示文字",
+                    Type = "string",
+                    ValueList = " — ",
+                    DefaultValue = "清屏"
+                },
+                new AttributeItem(){
+                    Name = "ClearButtonIcon",
+                    Description = "按钮显示图标",
+                    Type = "string",
+                    ValueList = " — ",
+                    DefaultValue = "fa fa-fw fa-times"
+                },
+                new AttributeItem(){
+                    Name = "ClearButtonColor",
+                    Description = "按钮颜色",
+                    Type = "Color",
+                    ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
+                    DefaultValue = "Secondary"
                }
            };
        }
--- a/src/BootstrapBlazor.Shared/Pages/Editors.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Editors.razor
@ -7,11 +7,11 @@
 <p><code>Editor</code> 组件是依赖 <a href="https://summernote.org/" target="_blank"><code>Summernote.js</code></a> 组件库的，所以使用本组件时需要事先应用相应的 <code>css</code> 与 <code>js</code> 文件</p>

 <h4>CSS 文件</h4>
-<Pre>&lt;link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.css" /&gt;
+<Pre>&lt;link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css"&gt;
 </Pre>

 <h4>JS 文件</h4>
-<Pre>&lt;script src="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.js"&gt;&lt;/script&gt;
+<Pre>&lt;script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"&gt;&lt;/script&gt;
 &lt;script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"&gt;&lt;/script&gt;
 </Pre>

@ -34,4 +34,20 @@
    <Editor IsEditor="true" Height="400"></Editor>
 </Block>

+<Block Title="双向绑定" Introduction="实战中通过双向绑定到 <code>Value</code> 后台自动获取到客户端富文本框编辑内容" CodeFile="editor.5.html">
+    <p>通过 <code>bind-Value</code> 对 <code>EditorValue</code> 后台属性进行双向绑定，编辑框内进行编辑后点击 <b>完成</b> 按钮，下方文本框内即可显示编辑后结果</p>
+    <Editor @bind-Value="@EditorValue"></Editor>
+
+    <label class="control-label mt-3">显示编辑内容：</label>
+    <textarea class="form-control mt-3">@EditorValue</textarea>
+    <div class="mt-3">
+        <Button @onclick="SetValue">Reset</Button>
+    </div>
+</Block>
 <AttributeTable Items="@GetAttributes()" />
+@code{
+    public void SetValue()
+    {
+        EditorValue = "更改后的值";
+    }
+}
--- a/src/BootstrapBlazor.Shared/Pages/Editors.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Editors.razor.cs
@ -8,6 +8,8 @@ namespace BootstrapBlazor.Shared.Pages
    /// </summary>
    public sealed partial class Editors
    {
+        private string EditorValue { get; set; } = "初始值 <b>Test</b>";
+
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
@ -33,6 +35,5 @@ namespace BootstrapBlazor.Shared.Pages
                DefaultValue = " — "
            }
        };
-
    }
 }
--- a/src/BootstrapBlazor.Shared/Pages/Index.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Index.razor.cs
@ -23,7 +23,7 @@ namespace BootstrapBlazor.Shared.Pages
        {
            await base.OnAfterRenderAsync(firstRender);

-            if (firstRender && JSRuntime != null) await JSRuntime.InvokeVoidAsync("$.type", TypeElement);
+            if (firstRender && JSRuntime != null) await JSRuntime.InvokeVoidAsync("$.indexTyper", TypeElement);
        }
    }
 }
--- a/src/BootstrapBlazor.Shared/Pages/Layouts.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Layouts.razor
@ -50,7 +50,7 @@
 <h4>常见页面布局</h4>

 <Block Title="上中下布局" Introduction="常见于互联网网站布局" CodeFile="layout.1.html">
-    <Layout>
+    <Layout ShowFooter="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
@ -64,7 +64,7 @@
 </Block>

 <Block Title="中部左右结构布局" Introduction="中部采用左右结构，多用于后台管理网站布局，当布局模板中增加 <code>Side</code> 组件时默认采用上中下，中部采用左右结构布局" CodeFile="layout.2.html">
-    <Layout>
+    <Layout ShowFooter="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
@ -81,7 +81,7 @@
 </Block>

 <Block Title="左右结构" Introduction="右侧采用上中下结构，多用于后台管理网站布局，通过设置 <code>IsFullSide</code> 属性值来控制布局为左右结构" CodeFile="layout.3.html">
-    <Layout IsFullSide="true">
+    <Layout ShowFooter="true" IsFullSide="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
@ -98,7 +98,7 @@
 </Block>

 <Block Title="自定义侧边栏宽度支持百分比" Introduction="通过设置 <code>SideWidth</code> 属性控制侧边栏宽度，支持百分比写法，设置 <code>0</code> 时关闭设置宽度功能，采用内部子控件撑满宽度特性" CodeFile="layout.4.html">
-    <Layout SideWidth="200">
+    <Layout ShowFooter="true" SideWidth="200">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
@ -135,7 +135,7 @@
        右侧面板中可用区域默认为全部，适用于带 <code>Tab</code> 组件的布局，本例中为了美观 <code>Main</code> 模板中内置了一个 <code>div</code> 并且设置样式为 <code>style="padding: 1rem;"</code>
    </Alert>
    <div style="width: 100%; height: 300px; border: 1px solid rgba(0,0,0,.125);">
-        <Layout SideWidth="160px">
+        <Layout ShowFooter="true" SideWidth="160px">
            <Header>
                <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
            </Header>
@ -156,7 +156,7 @@
        本例点击左侧菜单展开后不出现滚动条会撑开父容器高度
    </p>
    <div style="width: 100%; border: 1px solid rgba(0,0,0,.125);">
-        <Layout SideWidth="160px">
+        <Layout ShowFooter="true" SideWidth="160px">
            <Header>
                <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
            </Header>
--- a/src/BootstrapBlazor.Shared/Pages/ListViews.razor
+++ b/src/BootstrapBlazor.Shared/Pages/ListViews.razor
@ -27,7 +27,7 @@
    </div>
 </Block>

-<Block Title="分页显示" Introduction="设置 <code>IsPagination</code> 显示分页组件" CodeFile="listview.2.html">
+<Block Title="分页显示" Introduction="设置 <code>Pageable</code> 显示分页组件" CodeFile="listview.2.html">
    <div class="listview-demo">
        <ListView TItem="Product" Pageable="true" OnQueryAsync="@OnQueryAsync">
            <HeaderTemplate>
@ -45,6 +45,24 @@
    </div>
 </Block>

+<Block Title="分组显示" Introduction="设置 <code>GroupName</code> 数据进行分组显示" CodeFile="listview.3.html">
+    <div class="listview-demo">
+        <ListView TItem="Product" GroupName="@(p => p.Category)" OnQueryAsync="@OnQueryAsync">
+            <HeaderTemplate>
+                <div>产品列表</div>
+            </HeaderTemplate>
+            <BodyTemplate>
+                <Card>
+                    <CardBody>
+                        <img src="@context.ImageUrl" />
+                        <div class="listview-demo-desc">@context.Description</div>
+                    </CardBody>
+                </Card>
+            </BodyTemplate>
+        </ListView>
+    </div>
+</Block>
+
 <AttributeTable Items="GetAttributes()"></AttributeTable>

 <MethodTable Items="GetMethods()"></MethodTable>
--- a/src/BootstrapBlazor.Shared/Pages/ListViews.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/ListViews.razor.cs
@ -1,5 +1,6 @@
 using BootstrapBlazor.Components;
 using BootstrapBlazor.Shared.Common;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
@ -23,7 +24,8 @@ namespace BootstrapBlazor.Shared.Pages
            Products = Enumerable.Range(1, 100).Select(i => new Product()
            {
                ImageUrl = $"https://imgs.sdgxgz.com/images/Pic{i}.jpg",
-                Description = $"Pic{i}.jpg"
+                Description = $"Pic{i}.jpg",
+                Category = $"Group{(i % 4) + 1}"
            });
        }

@ -123,5 +125,10 @@ namespace BootstrapBlazor.Shared.Pages
        /// 
        /// </summary>
        public string Description { get; set; } = "";
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public string Category { get; set; } = "";
    }
 }
--- a/src/BootstrapBlazor.Shared/Pages/Searchs.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Searchs.razor
@ -0,0 +1,13 @@
+@page "/searchs"
+
+<h3>Search 搜索框</h3>
+
+<h4>用于数据搜索</h4>
+
+<Block Title="基本用法" Introduction="输入部分数据进行搜索" CodeFile="search.1.html">
+    <p>请输入 <code>1234</code> 获取智能提示</p>
+    <Search IgnoreCase="true" IsLikeMatch="true" PlaceHolder="搜索示例" Items="@Items" OnSearch="@OnSearch"></Search>
+    <Logger @ref="Trace" class="mt-3" />
+</Block>
+
+<AttributeTable Items="@GetAttributes()" />
--- a/src/BootstrapBlazor.Shared/Pages/Searchs.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Searchs.razor.cs
@ -0,0 +1,83 @@
+using BootstrapBlazor.Shared.Common;
+using BootstrapBlazor.Shared.Pages.Components;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public sealed partial class Searchs
+    {
+        private IEnumerable<string> Items => new string[] { "1", "12", "123", "1234" };
+
+        /// <summary>
+        /// 
+        /// </summary>
+        private Logger? Trace { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="searchText"></param>
+        private Task OnSearch(string searchText)
+        {
+            Trace?.Log($"SearchText: {searchText}");
+            return Task.CompletedTask;
+        }
+
+        /// <summary>
+        /// 获得属性方法
+        /// </summary>
+        /// <returns></returns>
+        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        {
+            // TODO: 移动到数据库中
+            new AttributeItem() {
+                Name = "ChildContent",
+                Description = "内容",
+                Type = "RenderFragment",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "Items",
+                Description = "内容",
+                Type = "IEnumerable<string>",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "NoDataTip",
+                Description = "自动完成数据无匹配项时提示信息",
+                Type = "string",
+                ValueList = " — ",
+                DefaultValue = "无匹配数据"
+            },
+            new AttributeItem() {
+                Name = "IsLikeMatch",
+                Description = "是否开启模糊匹配",
+                Type = "bool",
+                ValueList = "true|false",
+                DefaultValue = "false"
+            },
+            new AttributeItem()
+            {
+                Name = "IgnoreCase",
+                Description = "匹配时是否忽略大小写",
+                Type = "bool",
+                ValueList = "true|false",
+                DefaultValue = "true"
+            },
+            new AttributeItem()
+            {
+                Name="OnSearch",
+                Description = "点击搜索时回调此委托",
+                Type = "Func<string, Task>",
+                ValueList = " — ",
+                DefaultValue = " — "
+            }
+        };
+    }
+}
--- a/src/BootstrapBlazor.Shared/Pages/Tables.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Tables.razor
@ -128,7 +128,7 @@
    </Table>
 </Block>

-<Block Title="具有单表维护功能的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件件" CodeFile="table.10.html">
+<Block Title="具有单表维护功能的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件" CodeFile="table.10.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
@ -175,6 +175,23 @@
    </Table>
 </Block>

+<Block Title="自定义扩展按钮" Introduction="设置 <code>TableToolbarTemplate</code> 模板添加自定义扩展按钮" CodeFile="table.13.html">
+    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem"
+           IsPagination="true" PageItemsSource="@PageItemsSource"
+           IsStriped="true" IsBordered="true"
+           ShowToolbar="true" ShowDefaultButtons="false" ShowSearch="true" ShowCheckbox="true" ShowExtendButtons="false"
+           OnQueryAsync="@OnQueryAsync">
+        <TableToolbarTemplate>
+            <TableToolbarButton Color="Color.Primary" ButtonIcon="fa fa-fw fa-download" ButtonText="下载" />
+        </TableToolbarTemplate>
+        <TableColumns>
+            <TableColumn @bind-Field="@context.DateTime" Sortable="true" />
+            <TableColumn @bind-Field="@context.Name" Sortable="true" />
+            <TableColumn @bind-Field="@context.Address" Sortable="true" />
+        </TableColumns>
+    </Table>
+</Block>
+
 <Toast></Toast>

 <PopoverConfirm></PopoverConfirm>
--- a/src/BootstrapBlazor.Shared/Pages/Tables.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Tables.razor.cs
@ -50,6 +50,34 @@ namespace BootstrapBlazor.Shared.Pages
                ValueList = "—",
                DefaultValue = " — "
            },
+            new AttributeItem() {
+                Name = "TableFooter",
+                Description = "Table Footer 模板",
+                Type = "RenderFragment",
+                ValueList = "—",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "TableToolbarTemplate",
+                Description = "自定义按钮模板",
+                Type = "RenderFragment",
+                ValueList = "—",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "EditTemplate",
+                Description = "编辑弹窗模板",
+                Type = "RenderFragment<TItem?>",
+                ValueList = "—",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "SearchTemplate",
+                Description = "高级搜索模板",
+                Type = "RenderFragment<TItem>",
+                ValueList = "—",
+                DefaultValue = " — "
+            },
            new AttributeItem() {
                Name = "IsBordered",
                Description = "边框",
@ -92,13 +120,6 @@ namespace BootstrapBlazor.Shared.Pages
                ValueList = " — ",
                DefaultValue = "—"
            },
-            new AttributeItem() {
-                Name = "RowTemplate",
-                Description = "RowTemplate 实例",
-                Type = "RenderFragment<TItem>",
-                ValueList = "—",
-                DefaultValue = " — "
-            },
            new AttributeItem() {
                Name = "ShowCheckbox",
                Description = "选择列",
@ -134,13 +155,6 @@ namespace BootstrapBlazor.Shared.Pages
                ValueList = "true / false",
                DefaultValue = " — "
            },
-            new AttributeItem() {
-                Name = "TableFooter",
-                Description = "TableFooter 实例",
-                Type = "RenderFragment<TItem>",
-                ValueList = "—",
-                DefaultValue = " — "
-            },
            new AttributeItem() {
                Name = "OnQueryAsync",
                Description = "异步查询回调方法",
--- a/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs
+++ b/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs
@ -263,6 +263,11 @@ namespace BootstrapBlazor.Shared.Shared
                Url = "popovers"
            });
            item.AddItem(new MenuItem()
+            {
+                Text = "搜索框 Search",
+                Url = "searchs"
+            });
+            item.AddItem(new MenuItem()
            {
                Text = "表格 Table",
                Url = "tables"
--- a/src/BootstrapBlazor.Shared/wwwroot/images/Search.png
+++ b/src/BootstrapBlazor.Shared/wwwroot/images/Search.png
--- a/src/BootstrapBlazor.Shared/wwwroot/js/common.js
+++ b/src/BootstrapBlazor.Shared/wwwroot/js/common.js
@ -50,7 +50,7 @@
                }, 600);
            }
        },
-        type: function (el) {
+        indexTyper: function (el) {
            var $this = $(el);
            var $cursor = $this.next();

--- a/src/BootstrapBlazor.WebAssembly.ClientHost/Properties/launchSettings.json
+++ b/src/BootstrapBlazor.WebAssembly.ClientHost/Properties/launchSettings.json
@ -1,4 +1,5 @@
 {
+  "useWebAssemblyDebugging": true,
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
--- a/src/BootstrapBlazor.WebAssembly.ClientHost/wwwroot/index.html
+++ b/src/BootstrapBlazor.WebAssembly.ClientHost/wwwroot/index.html
@ -16,7 +16,7 @@
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
-    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.css">
+    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
@ -62,7 +62,7 @@
    <script src="_content/BootstrapBlazor/lib/jquery/jquery.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
-    <script src="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.js"></script>
+    <script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@ -6,7 +6,7 @@
        <RazorLangVersion>3.0</RazorLangVersion>
        <IsPackable>true</IsPackable>
        <PackageIcon>logo.png</PackageIcon>
-        <Version>3.1.8</Version>
+        <Version>3.1.9-beta02</Version>
    </PropertyGroup>

    <ItemGroup>
--- a/src/BootstrapBlazor/Components/Button/ButtonBase.cs
+++ b/src/BootstrapBlazor/Components/Button/ButtonBase.cs
@ -19,6 +19,8 @@ namespace BootstrapBlazor.Components
            .AddClass($"btn-{Size.ToDescriptionString()}", Size != Size.None)
            .AddClass("btn-block", IsBlock)
            .AddClass("disabled", IsDisabled)
+            .AddClass("is-round", ButtonStyle == ButtonStyle.Round)
+            .AddClass("is-circle", ButtonStyle == ButtonStyle.Circle)
            .AddClassFromAttributes(AdditionalAttributes)
            .Build();

@ -33,14 +35,9 @@ namespace BootstrapBlazor.Components
        protected string? Tab => IsDisabled ? "-1" : null;

        /// <summary>
-        /// 获得 EditContext 实例
+        /// 按钮风格枚举
        /// </summary>
-        [CascadingParameter] protected EditContext? EditContext { get; set; }
-
-        /// <summary>
-        /// 获得 ValidateFormBase 实例
-        /// </summary>
-        [CascadingParameter] public ValidateFormBase? EditForm { get; set; }
+        [Parameter] public ButtonStyle ButtonStyle { get; set; }

        /// <summary>
        /// OnClick 事件
@ -94,6 +91,16 @@ namespace BootstrapBlazor.Components
        /// </summary>
        [Parameter] public RenderFragment? ChildContent { get; set; }

+        /// <summary>
+        /// 获得 EditContext 实例
+        /// </summary>
+        [CascadingParameter] protected EditContext? EditContext { get; set; }
+
+        /// <summary>
+        /// 获得 ValidateFormBase 实例
+        /// </summary>
+        [CascadingParameter] public ValidateFormBase? EditForm { get; set; }
+
        /// <summary>
        /// OnInitialized 方法
        /// </summary>
--- a/src/BootstrapBlazor/Components/Console/Console.razor
+++ b/src/BootstrapBlazor/Components/Console/Console.razor
@ -1,10 +1,10 @@
@namespace BootstrapBlazor.Components
@inherits ConsoleBase

-<div class="card">
+<div @attributes="@AdditionalAttributes" class="@ClassString">
    <div class="card-header d-flex">
-        <span class="flex-fill">系统监控</span>
-        <span class="light flash green" data-toggle="tooltip" title="通讯指示灯"></span>
+        <span class="flex-fill">@HeaderText</span>
+        <span class="light flash green" data-toggle="tooltip" title="@LightTitle"></span>
    </div>
    <div class="card-body console-body" style="@BodyStyleString">
        <div class="console-window">
@ -15,9 +15,9 @@
        </div>
    </div>
    <div class="@FooterClassString">
-        <button type="button" class="btn btn-secondary" @onclick="@ClearConsole">
-            <i class="fa fa-times"></i>
-            <span>清屏</span>
+        <button type="button" class="@ClearButtonClassString" @onclick="@ClearConsole">
+            <i class="@ClearButtonIcon"></i>
+            <span>@ClearButtonText</span>
        </button>
    </div>
 </div>
--- a/src/BootstrapBlazor/Components/Console/ConsoleBase.cs
+++ b/src/BootstrapBlazor/Components/Console/ConsoleBase.cs
@ -9,6 +9,13 @@ namespace BootstrapBlazor.Components
    /// </summary>
    public abstract class ConsoleBase : BootstrapComponentBase
    {
+        /// <summary>
+        /// 获得 组件样式
+        /// </summary>
+        protected string? ClassString => CssBuilder.Default("card console")
+            .AddClassFromAttributes(AdditionalAttributes)
+            .Build();
+
        /// <summary>
        /// 获得 Console Body Style 字符串
        /// </summary>
@ -23,12 +30,49 @@ namespace BootstrapBlazor.Components
            .AddClass("d-none", OnClear == null)
            .Build();

+        /// <summary>
+        /// 获得 按钮样式
+        /// </summary>
+        protected string? ClearButtonClassString => CssBuilder.Default("btn btn-secondary")
+            .AddClass($"btn-{ClearButtonColor.ToDescriptionString()}", ClearButtonColor != Color.None)
+            .Build();
+
        /// <summary>
        /// 获得/设置 组件绑定数据源
        /// </summary>
        [Parameter]
        public IEnumerable<string> Items { get; set; } = new string[0];

+        /// <summary>
+        /// 获得/设置 Header 显示文字 默认值为 系统监控
+        /// </summary>
+        [Parameter]
+        public string HeaderText { get; set; } = "系统监控";
+
+        /// <summary>
+        /// 获得/设置 指示灯 Title 显示文字
+        /// </summary>
+        [Parameter]
+        public string LightTitle { get; set; } = "通讯指示灯";
+
+        /// <summary>
+        /// 获得/设置 按钮 显示文字 默认值为 清屏
+        /// </summary>
+        [Parameter]
+        public string ClearButtonText { get; set; } = "清屏";
+
+        /// <summary>
+        /// 获得/设置 按钮 显示图标 默认值为 fa-times
+        /// </summary>
+        [Parameter]
+        public string ClearButtonIcon { get; set; } = "fa fa-fw fa-times";
+
+        /// <summary>
+        /// 获得/设置 按钮 显示图标 默认值为 fa-times
+        /// </summary>
+        [Parameter]
+        public Color ClearButtonColor { get; set; } = Color.Secondary;
+
        /// <summary>
        /// 获得/设置 清空委托方法
        /// </summary>
@ -39,7 +83,7 @@ namespace BootstrapBlazor.Components
        /// 获得/设置 组件高度 默认为 126px;
        /// </summary>
        [Parameter]
-        public int Height { get; set; } = 126;
+        public int Height { get; set; }

        /// <summary>
        /// 清空控制台消息方法
--- a/src/BootstrapBlazor/Components/Dialog/DialogOption.cs
+++ b/src/BootstrapBlazor/Components/Dialog/DialogOption.cs
@ -24,12 +24,12 @@ namespace BootstrapBlazor.Components
        public bool IsCentered { get; set; } = true;

        /// <summary>
-        /// 获得/设置 是否弹窗正文超长时滚动
+        /// 获得/设置 是否弹窗正文超长时滚动 默认为 false
        /// </summary>
        public bool IsScrolling { get; set; } = false;

        /// <summary>
-        /// 获得/设置 是否显示关闭按钮
+        /// 获得/设置 是否显示关闭按钮 默认为 true
        /// </summary>
        public bool ShowCloseButton { get; set; } = true;

@ -49,7 +49,7 @@ namespace BootstrapBlazor.Components
        public RenderFragment? FooterTemplate { get; set; }

        /// <summary>
-        /// 获得/设置 是否保持弹窗内组件状态 默认为不保持
+        /// 获得/设置 是否保持弹窗内组件状态 默认为 false 不保持
        /// </summary>
        public bool KeepChildrenState { get; set; }

--- a/src/BootstrapBlazor/Components/Editor/Editor.razor
+++ b/src/BootstrapBlazor/Components/Editor/Editor.razor
@ -2,5 +2,5 @@
@inherits EditorBase

 <div @attributes="@AdditionalAttributes" class="editor" @ref="EditorElement">
-    <div class="editor-body form-control" placeholder="@Placeholder"></div>
+    <div class="@EditClassString" placeholder="@Placeholder"></div>
 </div>
--- a/src/BootstrapBlazor/Components/Editor/EditorBase.cs
+++ b/src/BootstrapBlazor/Components/Editor/EditorBase.cs
@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 using System.Threading.Tasks;

 namespace BootstrapBlazor.Components
@ -13,6 +14,18 @@ namespace BootstrapBlazor.Components
        /// </summary>
        protected ElementReference EditorElement { get; set; }

+        /// <summary>
+        /// 获得/设置 JSInterop 实例
+        /// </summary>
+        protected JSInterop<EditorBase>? Interope { get; set; }
+
+        /// <summary>
+        /// 获得 Editor 样式
+        /// </summary>
+        protected string? EditClassString => CssBuilder.Default("editor-body form-control")
+            .AddClass("open", IsEditor)
+            .Build();
+
        /// <summary>
        /// 获得/设置 Placeholder 提示消息
        /// </summary>
@ -31,6 +44,31 @@ namespace BootstrapBlazor.Components
        [Parameter]
        public int Height { get; set; }

+        private string? _value;
+        private bool _renderValue;
+        /// <summary>
+        /// 获得/设置 组件值
+        /// </summary>
+        [Parameter]
+        public string? Value
+        {
+            get { return _value; }
+            set
+            {
+                if (_value != value)
+                {
+                    _value = value;
+                    _renderValue = true;
+                }
+            }
+        }
+
+        /// <summary>
+        /// 获得/设置 组件值变化后的回调委托
+        /// </summary>
+        [Parameter]
+        public EventCallback<string?> ValueChanged { get; set; }
+
        /// <summary>
        /// OnAfterRenderAsync 方法
        /// </summary>
@ -42,7 +80,39 @@ namespace BootstrapBlazor.Components

            if (firstRender && JSRuntime != null)
            {
-                await JSRuntime.Invoke(EditorElement, "editor", IsEditor, Height);
+                Interope = new JSInterop<EditorBase>(JSRuntime);
+                await Interope.Invoke(this, EditorElement, "editor", nameof(Update), Height, Value ?? "");
+            }
+            if (_renderValue && JSRuntime != null)
+            {
+                _renderValue = false;
+                await JSRuntime.Invoke(EditorElement, "editor", "code", "", "", Value ?? "");
+            }
+        }
+
+        /// <summary>
+        /// Update 方法
+        /// </summary>
+        /// <param name="value"></param>
+        [JSInvokable]
+        public async Task Update(string value)
+        {
+            Value = value;
+            if (ValueChanged.HasDelegate) await ValueChanged.InvokeAsync(Value);
+            _renderValue = false;
+        }
+
+        /// <summary>
+        /// Dispose 方法
+        /// </summary>
+        /// <param name="disposing"></param>
+        protected override void Dispose(bool disposing)
+        {
+            base.Dispose(disposing);
+
+            if (disposing)
+            {
+                Interope?.Dispose();
            }
        }
    }
--- a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor
+++ b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor
@ -4,7 +4,7 @@

@if (ShowLabel)
 {
-    @if (ValueExpression != null && DisplayText != null)
+    @if (ValueExpression != null || DisplayText != null)
    {
        <label class="control-label" for="@Id">@DisplayText</label>
    }
--- a/src/BootstrapBlazor/Components/ListView/ListView.razor
+++ b/src/BootstrapBlazor/Components/ListView/ListView.razor
@ -12,11 +12,27 @@
    <div class="listview-body">
        @if (BodyTemplate != null && Items != null)
        {
-            @foreach (var item in Items)
+            if (GroupName == null)
            {
-                <div class="listview-item">
-                    @BodyTemplate.Invoke(item)
-                </div>
+                foreach (var item in Items)
+                {
+                    <div class="listview-item">
+                        @BodyTemplate.Invoke(item)
+                    </div>
+                }
+            }
+            else
+            {
+                foreach (var key in Items.GroupBy(GroupName).OrderBy(k => k.Key))
+                {
+                    <div class="listview-item-group">@key.Key</div>
+                    @foreach (var item in key)
+                    {
+                        <div class="listview-item">
+                            @BodyTemplate.Invoke(item)
+                        </div>
+                    }
+                }
            }
        }
    </div>
--- a/src/BootstrapBlazor/Components/ListView/ListViewBase.cs
+++ b/src/BootstrapBlazor/Components/ListView/ListViewBase.cs
@ -2,6 +2,7 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
+using System.Linq.Expressions;
 using System.Threading.Tasks;

 namespace BootstrapBlazor.Components
@ -54,6 +55,12 @@ namespace BootstrapBlazor.Components
        [Parameter]
        public IEnumerable<int>? PageItemsSource { get; set; }

+        /// <summary>
+        /// 获得/设置 分组名称
+        /// </summary>
+        [Parameter]
+        public Func<TItem, object>? GroupName { get; set; }
+
        /// <summary>
        /// 异步查询回调方法
        /// </summary>
--- a/src/BootstrapBlazor/Enums/ButtonStyle.cs
+++ b/src/BootstrapBlazor/Enums/ButtonStyle.cs
@ -0,0 +1,21 @@
+namespace BootstrapBlazor.Components
+{
+    /// <summary>
+    /// 按钮样式枚举
+    /// </summary>
+    public enum ButtonStyle
+    {
+        /// <summary>
+        /// 默认风格
+        /// </summary>
+        None = 0,
+        /// <summary>
+        /// 圆角按钮
+        /// </summary>
+        Round,
+        /// <summary>
+        /// 圆形胶囊按钮
+        /// </summary>
+        Circle,
+    }
+}
--- a/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css
+++ b/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css
@ -96,6 +96,16 @@ a {
    margin-left: 4px;
 }

+.btn.is-circle {
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+}
+
+.btn.is-round {
+    border-radius: 20px;
+}
+
 /*select*/
 .form-select .dropdown-menu {
    margin-top: 10px;
@ -4369,6 +4379,23 @@ a {
            margin: 0 1rem 1rem 0;
        }

+        .listview .listview-body .listview-item-group {
+            flex-basis: 100%;
+            margin: 1rem 0;
+            font-weight: bold;
+            position: relative;
+        }
+
+            .listview .listview-body .listview-item-group:after {
+                content: "";
+                position: absolute;
+                top: calc(-50%);
+                left: -1rem;
+                right: 0;
+                background-color: rgba(0,0,0,.1);
+                height: calc(200%);
+            }
+
    .listview .listview-footer {
        padding: 1rem;
        border-top-color: inherit;
--- a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.js
+++ b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.js
@ -826,36 +826,54 @@

    $.extend({
        html5edit: function (el, options) {
-            if (!$.isFunction($.fn.summernote)) return;
+            if (!$.isFunction($.fn.summernote)) {
+                return;
+            }

            var $this = $(el);
            var op = typeof options == 'object' && options;
+
            if (/destroy|hide/.test(options)) {
                return $this.toggleClass('open').summernote(options);
            }
            else if (typeof options == 'string') {
                return $this.hasClass('open') ? $this.summernote(options) : $this.html();
            }
-            if (!$this.hasClass('open')) {
-                op = $.extend({ focus: false, lang: 'zh-CN', height: 80, dialogsInBody: true }, op);
-                if (!$this.attr('data-original-title')) $this.on('click', op, function (event) {
-                    var $this = $(this).tooltip('hide');
-                    var op = $.extend({ placeholder: $this.attr('placeholder') }, event.data);
-                    var $toolbar = $this.toggleClass('open').summernote($.extend({}, op, { focus: true }))
-                        .next().find('.note-toolbar')
-                        .on('click', 'button[data-method]', $this, function (event) {
-                            var $btn = $(this);
-                            switch ($btn.attr('data-method')) {
-                                case 'submit':
-                                    $btn.tooltip('dispose');
-                                    event.data.toggleClass('open').summernote('destroy');
-                                    break;
-                            }
-                        });
-                    var $done = $('<div class="note-btn-group btn-group note-view note-right"><button type="button" class="note-btn note-btn-close" tabindex="-1" data-method="submit" title="完成" data-placement="bottom"><i class="fa fa-check"></i></button></div>').appendTo($toolbar).find('button').tooltip({ container: 'body' });
-                    $('body').find('.note-group-select-from-files [accept="image/*"]').attr('accept', 'image/bmp,image/png,image/jpg,image/jpeg,image/gif');
-                }).tooltip({ title: '点击展开编辑' });
-                if (op.focus) $this.trigger('click');
+
+            op = $.extend({ focus: true, lang: 'zh-CN', height: 80, dialogsInBody: true }, op);
+
+            // div 点击事件
+            $this.on('click', op, function (event, args) {
+                var $this = $(this).tooltip('hide');
+                var op = $.extend({ placeholder: $this.attr('placeholder') }, event.data, args || {});
+                var $toolbar = $this.toggleClass('open').summernote($.extend({
+                    callbacks: {
+                        onChange: function (htmlString) {
+                            op.obj.invokeMethodAsync(op.method, htmlString);
+                        }
+                    }
+                }, op))
+                    .next().find('.note-toolbar')
+                    .on('click', 'button[data-method]', { note: $this, op: op }, function (event) {
+                        var $btn = $(this);
+                        switch ($btn.attr('data-method')) {
+                            case 'submit':
+                                $btn.tooltip('dispose');
+                                var $note = event.data.note.toggleClass('open');
+                                var htmlString = $note.summernote('code');
+                                $note.summernote('destroy');
+                                event.data.op.obj.invokeMethodAsync(event.data.op.method, htmlString);
+                                break;
+                        }
+                    });
+                var $done = $('<div class="note-btn-group btn-group note-view note-right"><button type="button" class="note-btn btn btn-sm note-btn-close" tabindex="-1" data-method="submit" title="完成" data-placement="bottom"><i class="fa fa-check"></i></button></div>').appendTo($toolbar).find('button').tooltip({ container: 'body' });
+                $('body').find('.note-group-select-from-files [accept="image/*"]').attr('accept', 'image/bmp,image/png,image/jpg,image/jpeg,image/gif');
+            }).tooltip({ title: '点击展开编辑' });
+
+            if (op.value) $this.html(op.value);
+            if ($this.hasClass('open')) {
+                // 初始化为 editor
+                $this.trigger('click', { focus: false });
            }
            return this;
        },
@ -1389,10 +1407,23 @@
                tooltip.tooltip('hide');
            });
        },
-        editor: function (el, isEditor, height) {
-            var option = { focus: isEditor };
-            if (height) option.height = height;
-            $.html5edit(el.getElementsByClassName("editor-body"), option);
+        editor: function (el, obj, method, height, value) {
+            var editor = el.getElementsByClassName("editor-body");
+
+            if (obj === 'code') {
+                if ($(editor).hasClass('open')) {
+                    $(editor).summernote('code', value);
+                }
+                else {
+                    $(editor).html(value);
+                }
+            }
+            else {
+                var option = { obj: obj, method: method, height: height };
+                if (value) option.value = value;
+
+                $.html5edit(editor, option);
+            }
        },
        split: function (el) {
            var $split = $(el);
--- a/src/BootstrapBlazor/wwwroot/lib/summernote/summernote-bs4.min.css
+++ b/src/BootstrapBlazor/wwwroot/lib/summernote/summernote-bs4.min.css
--- a/src/BootstrapBlazor/wwwroot/lib/summernote/summernote-lite.min.js
+++ b/src/BootstrapBlazor/wwwroot/lib/summernote/summernote-lite.min.js
--- a/src/BootstrapBlazor/wwwroot/lib/summernote/summernote-lite.min.css
+++ b/src/BootstrapBlazor/wwwroot/lib/summernote/summernote-lite.min.css