chore: bump verson to 5.7.0

* style: 增加表单中 Display 组件背景色

.editorconfig

@@ -88,9 +88,10 @@ dotnet_naming_symbols.constant_fields.required_modifiers          = const
 # var preferences 
 csharp_style_var_for_built_in_types = true:silent 
 csharp_style_var_when_type_is_apparent = true:silent 
-csharp_style_var_elsewhere = true:silent 
+csharp_style_var_elsewhere = true:silent
+csharp_prefer_static_local_function= true:silent
 # Expression-bodied members 
-csharp_style_expression_bodied_methods = false:silent 
+csharp_style_expression_bodied_methods = true:silent
 csharp_style_expression_bodied_constructors = false:silent 
 csharp_style_expression_bodied_operators = false:silent 
 csharp_style_expression_bodied_properties = true:silent 

.filenesting.json

@@ -0,0 +1,110 @@
+{
+  "help": "https://go.microsoft.com/fwlink/?linkid=866610",
+  "root": true,
+
+  "dependentFileProviders": {
+    "add": {
+      "addedExtension": {},
+      "pathSegment": {
+        "add": {
+          ".*": [
+            ".js",
+            ".css",
+            ".html",
+            ".htm",
+            ".less",
+            ".scss",
+            ".coffee",
+            ".iced",
+            ".config",
+            ".cs",
+            ".vb",
+            ".json"
+          ]
+        }
+      },
+      "extensionToExtension": {
+        "add": {
+          ".js": [
+            ".cs",
+            ".razor",
+            ".coffee",
+            ".iced",
+            ".ts",
+            ".tsx",
+            ".jsx"
+          ],
+          ".css": [
+            ".cs",
+            ".razor",
+            ".less",
+            ".scss",
+            ".sass",
+            ".styl"
+          ],
+          ".html": [
+            ".md",
+            ".mdown",
+            ".markdown",
+            ".mdwn"
+          ],
+          ".map": [
+            ".js",
+            ".css"
+          ],
+          ".svgz": [
+            ".svg"
+          ],
+          ".designer.cs": [
+            ".resx"
+          ],
+          ".cs.d.ts": [
+            ".cs"
+          ]
+        }
+      },
+      "fileToFile": {
+        "add": {
+          ".bowerrc": [
+            "bower.json"
+          ],
+          ".npmrc": [
+            "package.json"
+          ],
+          "npm-shrinkwrap.json": [
+            "package.json"
+          ],
+          "yarn.lock": [
+            "package.json"
+          ],
+          ".yarnclean": [
+            "package.json"
+          ],
+          ".yarnignore": [
+            "package.json"
+          ],
+          ".yarn-integrity": [
+            "package.json"
+          ],
+          ".yarnrc": [
+            "package.json"
+          ],
+          "package-lock.json": [
+            "package.json"
+          ]
+        }
+      },
+      "fileSuffixToExtension": {
+        "add": {
+          "-vsdoc.js": [
+            ".js"
+          ]
+        }
+      },
+      "allExtensions": {
+        "add": {
+        }
+      }
+    }
+  }
+}

.github/workflows/build.yml

@@ -16,7 +16,7 @@ jobs:
     - name: Setup .NET Core
       uses: actions/setup-dotnet@v1
       with:
-        dotnet-version: 5.0.202
+        dotnet-version: 5.0.400
 
     - name: Build
       env: 

.github/workflows/pack.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - pack
+      - hotfix
 
 jobs:
   pack:
@@ -15,7 +16,7 @@ jobs:
     - name: Setup .NET Core
       uses: actions/setup-dotnet@v1
       with:
-        dotnet-version: 5.0.202
+        dotnet-version: 5.0.400
 
     - name: Publish to Nuget
       env: 

.github/workflows/publish.yml

@@ -15,7 +15,7 @@ jobs:
     - name: Setup .NET Core
       uses: actions/setup-dotnet@v1
       with:
-        dotnet-version: 5.0.202
+        dotnet-version: 5.0.400
 
     - name: Publish wasm
       run: |

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Package to Nuget
+name: Package Extensions to Nuget
 
 on:
   push:
@@ -15,7 +15,7 @@ jobs:
     - name: Setup .NET Core
       uses: actions/setup-dotnet@v1
       with:
-        dotnet-version: 5.0.202
+        dotnet-version: 5.0.400
 
     - name: Publish to Nuget
       env: 

BootstrapBlazor.sln

@@ -97,6 +97,18 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BootstrapBlazor.WebAssembly
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BootstrapBlazor.WebAssembly.ServerHost", "src\Wasm\BootstrapBlazor.WebAssembly.ServerHost\BootstrapBlazor.WebAssembly.ServerHost.csproj", "{FFFD2EB7-AE88-4DAD-A825-528B2CEFB4B5}"
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "config", "config", "{8AB9DB43-233A-4D49-99FA-FA540C2109F2}"
+	ProjectSection(SolutionItems) = preProject
+		.editorconfig = .editorconfig
+		.filenesting.json = .filenesting.json
+		.gitattributes = .gitattributes
+		.gitignore = .gitignore
+		.issuetracker = .issuetracker
+		appveyor.yml = appveyor.yml
+		Directory.Build.props = Directory.Build.props
+		NuGet.Config = NuGet.Config
+	EndProjectSection
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -163,6 +175,7 @@ Global
 		{F0754254-903C-411B-972C-EC91254B4A67} = {A627F6CC-94FC-4E48-B3CC-F0EA16700527}
 		{B84D315E-967D-4FBF-9B72-1F3128155CB0} = {A627F6CC-94FC-4E48-B3CC-F0EA16700527}
 		{190F25CF-C6F9-4964-97E9-F6A912D527AE} = {7C1D79F1-87BC-42C1-BD5A-CDE4044AC1BD}
+		{22328011-53B3-447A-B781-AC3C196B2847} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
 		{C8E79F4C-8C55-4E13-96B5-3D2BD6A07B74} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
 		{CD062AB6-244D-402A-8F33-C37DAC5856CC} = {22328011-53B3-447A-B781-AC3C196B2847}
 		{56FEFF09-85FC-408D-A397-6E264E68414E} = {22328011-53B3-447A-B781-AC3C196B2847}

NuGet.Config

@@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <configuration>
   <packageSources>
-    <add key="azure" value="https://nuget.cdn.azure.cn/v3/index.json" />
-    <add key="cnblogs" value="https://nuget.cnblogs.com/v3/index.json" />
-    <add key="huawei" value="https://repo.huaweicloud.com/repository/nuget/v3/index.json" />
+    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
+    <add key="Blazor" value="https://nuget.blazor.zone/v3/index.json" />
   </packageSources>
 </configuration>

README.zh-CN.md

@@ -37,6 +37,12 @@ Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：
 
 本项目是利用 Bootstrap 样式进行封装的 UI 组件库
 
+## 生态伙伴
+
+WTM 快速开发框架，设计的核心理念就是”尽一切可能提高开发效率“。WTM框架把常规编码结构化，重复编码自动化，它不仅是一个框架，它是强有力的生产力工具！目前 WTM 快速开发框架已深度集成 Blazor 欢迎大家使用 [传送门](https://wtmdoc.walkingtec.cn)
+
+<a href="https://wtmdoc.walkingtec.cn" target="_blank"><img src="http://images.gitee.com/uploads/images/2021/0718/194451_5b6cff04_554725.png" width="100px" /></a>
+
 ## 开发环境搭建
 1. 安装 .net core sdk 最新版 [官方网址](http://www.microsoft.com/net/download)
 2. 安装 Visual Studio 2019 最新版 [官方网址](https://visualstudio.microsoft.com/vs/getting-started/)

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -5,19 +5,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <None Remove="Linux.Dockerfile" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <Content Include="Linux.Dockerfile" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <SupportedPlatform Include="browser" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <PackageReference Include="Longbow.Tasks" Version="5.0.1" />
+    <PackageReference Include="Longbow.Tasks" Version="5.*" />
   </ItemGroup>
 
   <ItemGroup>

src/BootstrapBlazor.Server/Dockerfile

@@ -1,7 +1,7 @@
 #Depending on the operating system of the host machines(s) that will build or run the containers, the image specified in the FROM statement may need to be changed.
 #For more information, please see https://aka.ms/containercompat
 
-FROM mcr.microsoft.com/dotnet/runtime:5.0 AS base
+FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS base
 WORKDIR /app
 EXPOSE 80
 

src/BootstrapBlazor.Server/Linux.Dockerfile

@@ -1,19 +0,0 @@
-#Depending on the operating system of the host machines(s) that will build or run the containers, the image specified in the FROM statement may need to be changed.
-#For more information, please see https://aka.ms/containercompat
-
-FROM mcr.microsoft.com/dotnet/runtime:5.0 AS base
-WORKDIR /app
-EXPOSE 80
-
-FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
-WORKDIR /
-COPY . .
-
-WORKDIR "src/BootstrapBlazor.Server"
-FROM build AS publish
-RUN dotnet publish -c Release -o /app
-
-FROM base AS final
-WORKDIR /app
-COPY --from=publish /app .
-ENTRYPOINT ["dotnet", "BootstrapBlazor.Server.dll"]

src/BootstrapBlazor.Server/Pages/_Host.cshtml

@@ -21,6 +21,7 @@
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
     <link rel="apple-touch-icon" href="favicon.png">
     <base href="~/">
+    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" asp-append-version="true">
     <link rel="stylesheet" href="_content/BootstrapBlazor.Chart/css/bootstrap.blazor.chart.bundle.min.css" asp-append-version="true">
     <link rel="stylesheet" href="_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css" asp-append-version="true">
@@ -44,16 +45,17 @@
     </app>
 
     <div id="blazor-error-ui">
-        <environment include="Staging,Production">
-            An error has occurred. This application may no longer respond until reloaded.
-        </environment>
-        <environment include="Development">
-            An unhandled exception has occurred. See browser dev tools for details.
-        </environment>
+        <span>
+            <environment include="Staging,Production">
+                An error has occurred. This application may no longer respond until reloaded.
+            </environment>
+            <environment include="Development">
+                An unhandled exception has occurred. See browser dev tools for details.
+            </environment>
+        </span>
         <a href="" class="reload">Reload</a>
         <a class="dismiss"><i class="fa fa-times"></i></a>
     </div>
-    <div class="wwads-cn wwads-horizontal" data-id="72" style="max-width:350px"></div>
     <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>
     <script src="_content/BootstrapBlazor.Chart/js/bootstrap.blazor.chart.bundle.min.js" asp-append-version="true"></script>
     <script src="_content/BootstrapBlazor.TableExport/js/export.min.js" asp-append-version="true"></script>
@@ -62,6 +64,5 @@
     <script src="_content/BootstrapBlazor.Shared/lib/summernote/summernote-zh-CN.min.js" asp-append-version="true"></script>
     <script src="_content/BootstrapBlazor.Shared/js/common.js" asp-append-version="true"></script>
     <script src="_framework/blazor.server.js" asp-append-version="true"></script>
-    <script src="https://wwads.cn/js/makemoney.js" type="text/javascript" async></script>
 </body>
 </html>

src/BootstrapBlazor.Server/Properties/launchSettings.json

@@ -1,4 +1,4 @@
-{
+{
   "iisSettings": {
     "windowsAuthentication": false,
     "anonymousAuthentication": true,
@@ -29,4 +29,4 @@
       "launchUrl": "{Scheme}://{ServiceHost}:{ServicePort}"
     }
   }
-}
+}

src/BootstrapBlazor.Shared/App.razor.cs

@@ -3,8 +3,10 @@
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
 using Microsoft.JSInterop;
 using System;
+using System.Diagnostics.CodeAnalysis;
 using System.Threading.Tasks;
 
 namespace BootstrapBlazor.Shared
@@ -14,12 +16,14 @@ namespace BootstrapBlazor.Shared
     /// </summary>
     public sealed partial class App
     {
-        /// <summary>
-        /// 
-        /// </summary>
         [Inject]
+        [NotNull]
         private IJSRuntime? JSRuntime { get; set; }
 
+        [Inject]
+        [NotNull]
+        private IStringLocalizer<App>? Localizer { get; set; }
+
         /// <summary>
         /// 
         /// </summary>
@@ -28,9 +32,9 @@ namespace BootstrapBlazor.Shared
         {
             await base.OnAfterRenderAsync(firstRender);
 
-            if (firstRender && OperatingSystem.IsBrowser() && JSRuntime != null)
+            if (firstRender)
             {
-                await JSRuntime.InvokeVoidAsync("$.loading");
+                await JSRuntime.InvokeVoidAsync("$.loading", OperatingSystem.IsBrowser(), Localizer["ErrorMessage"].Value, Localizer["Reload"].Value);
             }
         }
     }

src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj

@@ -17,10 +17,9 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="BootstrapBlazor.Chart" Version="5.0.18" />
-    <PackageReference Include="BootstrapBlazor.Markdown" Version="5.0.18" />
-    <PackageReference Include="BootstrapBlazor.TableExport" Version="5.0.18" />
-    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+    <PackageReference Include="BootstrapBlazor.Chart" Version="5.*" />
+    <PackageReference Include="BootstrapBlazor.Markdown" Version="5.*" />
+    <PackageReference Include="BootstrapBlazor.TableExport" Version="5.*" />
   </ItemGroup>
 
   <ItemGroup>

src/BootstrapBlazor.Shared/Extensions/WebsiteOptions.cs

@@ -54,6 +54,11 @@ namespace BootstrapBlazor.Shared
         /// </summary>
         public string RepositoryUrl { get; set; } = "https://gitee.com/LongbowEnterprise/BootstrapBlazor/raw/dev/src/BootstrapBlazor.Shared/Pages/Samples/";
 
+        /// <summary>
+        /// 
+        /// </summary>
+        public string WikiUrl { get; set; } = "https://gitee.com/LongbowEnterprise/BootstrapBlazor/wikis/%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97?sort_id=4062034";
+
         /// <summary>
         /// 获得 QQ 1 群链接地址
         /// </summary>

src/BootstrapBlazor.Shared/Locales/en.json

@@ -1,11 +1,160 @@
 {
   "BootstrapBlazor.Shared.App": {
-    "Title": "Bootstrap of Blazor"
+    "Reload": "Reload",
+    "ErrorMessage": "An unhandled exception has occurred. See browser dev tools for details."
+  },
+  "BootstrapBlazor.Shared.Pages.Index": {
+    "BodyClassString": "welcome-body-en",
+    "Title": "Bootstrap Blazor enterprise-level UI component library",
+    "HeaderTitle": "Bootstrap style Blazor UI component library",
+    "HeaderDesc": "Based on the <code>Bootstrap</code> style library, it is carefully built, and {0} a variety of commonly used components have been added to bring you an extraordinary feeling for rapid development projects",
+    "HeaderBody": "The ",
+    "HeaderBody1": "native Blazor components library on the market",
+    "DynamicText": "best to use",
+    "DynamicText1": "best looking",
+    "DynamicText2": "most simple and practical",
+    "TagTitle": "Component",
+    "Span1": "Tree",
+    "Span2": "Menu",
+    "Span3": "Tag",
+    "Span4": "Table",
+    "Span5": "Layout",
+    "Span6": "Notification",
+    "Span7": "Upload",
+    "Span8": "Switch",
+    "CarouselH1": "Chart Component",
+    "CarouselP1": "Provide a variety of commonly used chart components",
+    "CarouselH2": "Chart IconComponent",
+    "CarouselP2": "Multi-dimensional data comparison",
+    "CarouselH3": "Full-featured table component",
+    "CarouselP3": "With all functions of adding, deleting, modifying, searching, paging, and sorting",
+    "CarouselH4": "Super timeline function",
+    "CarouselP4": "Custom nodes display arbitrary components",
+    "ContainerH1": "Rich Components",
+    "ContainerD1": "This set of components library contains more than {0} multiple components, from simple buttons to complex page-level components",
+    "ContainerH2": "Performance",
+    "ContainerD2": "Each control has been fine-tuned to optimize the refresh logic between parent and child components to avoid multiple loop updates",
+    "ContainerH3": "Easy to use",
+    "ContainerD3": "Easily grasp how to use components and quickly incorporate BootstrapBlazor controls into the project",
+    "ContainerH4": "Free and open source",
+    "ContainerD4": "Simple, direct, free to use, no dependent components, dependent on jQuery Bootstrap are all built-in",
+    "ContainerH5": "Demos and examples",
+    "ContainerD5": "Detailed documentation and online demonstration, simple function setting, direct copy code out of the box",
+    "ContainerH6": "Continually updated",
+    "ContainerD6": "Gitee platform hosting open source, never closed source, continuous update, timely response to questions and feedback",
+    "DonateH1": "Donate",
+    "DonateH2": "Scan the code to donate and invite the author to have a cup of coffee"
+  },
+  "BootstrapBlazor.Shared.Shared.HomeLayout": {
+    "FooterH1": "Related Works",
+    "FooterLi1": "Slider verification code",
+    "FriendLink": "Links",
+    "FriendLi1": "Lin Dexi's Blog",
+    "FriendLi2": "CCFlow",
+    "Community": "Community",
+    "CommunityLi1": "Contribution guide",
+    "CommunityLi2": "Join us",
+    "CommunityLi3": "Contact details",
+    "SpecialAcknowledgements": "Special Thanks",
+    "Footer": "Gitee Hosting Platform"
+  },
+  "BootstrapBlazor.Shared.Pages.labels": {
+    "Title": "Component label",
+    "P1": "This set of components includes <code>ValidateForm</code> <code>EditorForm</code> and a variety of <b>Form components</b> inherited from <code>ValidateBase&lt;TValue&gt;</code>. Among these components There is a special set of display front label logic, now let’s sort it out in a unified way:",
+    "UlLi1": "The <a href='/validateforms' target='_blank'>ValidateForm</a> component is a <b>verifiable</b> form component. The form component in this component will automatically perform data compliance checks. If Data non-compliance will prevent the <b>Submit</b> action, which is the most frequently used component in data submission",
+    "UlLi2": "The <a href='/editorforms' target='_blank'>EditorForm</a> component is an ordinary form component. After this component is bound to the <code>Model</code>, the entire form can be automatically generated, which greatly reduces repetition Code, put the <code>ValidateForm</code> on the outside to open the <b>data compliance check</b> very convenient, concise and efficient",
+    "P2": "Take the <a href='inputs' target='_blank'>BootstrapInput</a> input box component as an example to explain whether to display the <code>Label</code> logic",
+    "Tips": "The logic of <code>ShowLabel</code> is the principle of proximity. The closer the setting is to itself, the setting takes effect. For example, the form component is built into the <code>ValidateForm</code> component, even if <code>ValidateForm</code> is set to <code> >ShowLabel=true</code>, when the form component itself sets <code>ShowLabel=false</code>, the final result of the label is <b>not displayed</b>",
+    "Block1Title": "Use alone",
+    "Block1Intro": "Suitable for data entry",
+    "Block1P1": "When two-way binding is not used",
+    "Block1Li1": "<code>Label</code> will not be displayed by default",
+    "Block1Li2": "Control whether to display through the <code>ShowLabel</code> property",
+    "Block1Li3": "Display content when setting <code>DisplayText</code>",
+    "Block1Li4": "When not set, render a contentless <code>label</code> component as a placeholder",
+    "GroupBox1Title": "No two-way binding",
+    "GroupBox1D1": "No settings in the first text box, no label",
+    "GroupBox1D2": "The second text box setting <code>ShowLabel='true' DisplayText=``</code> displays a placeholder label without content",
+    "GroupBox1D3": "The third text box setting <code>ShowLabel='true' DisplayText='Name'</code> shows the set content label",
+    "GroupBox1D4": "The fourth text box setting <code>ShowLabel='true' DisplayText='@@null'</code> displays a placeholder label without content",
+    "P3": "When using two-way binding",
+    "GroupBox2Title": "Two-way binding",
+    "GroupBox2D1": "The first text box is set to <code>@@bind-Value='Dummy.Name'</code>, no label is displayed",
+    "GroupBox2D2": "The second text box setting <code>@@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@@Localizer[nameof(Foo.Address)]'</code> Display the contents of the setting",
+    "GroupBox2D3": "The third text box setting <code>@@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=``</code> Show no content placeholder label",
+    "GroupBox2D4": "The fourth text box setting <code>@@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@@null'</code> Display the label content under the resource file mechanism<code>Label</code> code>",
+    "Block2Title": "Used in EditorForm",
+    "Block2Intro": "Not used in <code>ValidateForm</code>",
+    "P4": "<b>Show label</b><div>The <code>ShowLabel</code> property of the <coe>EditorForm</coe> component is not set. If it is not set, it is equivalent to set to <code>true</code>. All components <b>display</b> tags</div>",
+    "P5": "<b>Do not display labels</b><div>Set <code>ShowLabel='false'</code>, all form components in the component <b>Do not display</b> tags</div>",
+    "Block3Title": "Use in EditorForm built-in ValidateForm",
+    "Block3Intro": "Used in external <code>ValidateForm</code>",
+    "P6": "<b>Show label</b><div>The <code>ShowLabel</code> property of the <coe>EditorForm</coe> component is not set. If it is not set, it is equivalent to set to <code>true</code>. All components <b>display</b> tags</div>",
+    "P7": "<b>Do not display labels</b><div>Set <code>ShowLabel='false'</code>, all form components in the component <b>Do not display</b> tags</div>",
+    "Block4Title": "Used in ValidateForm",
+    "Block4Intro": "Show labels are automatically turned on by default",
+    "P8": "<b>Show label</b><div>The <code>ShowLabel</code> property of the <coe>EditorForm</coe> component is not set. If it is not set, it is equivalent to set to <code>true</code>. All components <b>display</b> tags</div>",
+    "P9": "<b>Do not display labels</b><div>Set <code>ShowLabel='false'</code>, all form components in the component <b>Do not display</b> tags</div>"
+  },
+  "BootstrapBlazor.Shared.Pages.Install": {
+    "InstallTitle": "Install",
+    "GitP1": "There are many kinds of Git tools that everyone is familiar with, here I introduce two Git client tools",
+    "GitP2": "It is recommended to use the <a href='https://fork.dev'>Fork</a> tool to install, it can better and <a href='https://visualstudio.microsoft.com/vs/getting- started/' target='_blank'>Visutal Studio</a> to use with development tools.",
+    "NugetInstall": "Nuget Install",
+    "NugetP1": "Use <a href='https://www.nuget.org/packages?q=BootstrapBlazor' target='_blank'>nuget.org</a> to install BootstrapBlazor components",
+    "EnvBuildTitle": "Project Environment Construction",
+    "EnvLi1": "Install .net core sdk <a href='http://www.microsoft.com/net/download' target='_blan'>Official Website</a>",
+    "EnvLi2": "Install Visual Studio 2019 and above <a href='https://visualstudio.microsoft.com/vs/getting-started' target='_blank'>Official website",
+    "EnvLi3": "Pull the project code BootstrapBlazor <a href='https://gitee.com/LongbowEnterprise/BootstrapBlazor' target='_blank'>Warehouse URL</a>"
+  },
+  "BootstrapBlazor.Shared.Pages.Template": {
+    "Title": "Project Template",
+    "SubTitle": "Bootstrap Blazor App Template",
+    "P1": "In order to make it easier for everyone to use this set of components to quickly build projects, the author has made <b>Project Templates</code></b>, using <code>dotnet new</code> command line mode, using Proceed as follows:",
+    "P2": "1. Install the project template",
+    "P3": "2. Create project",
+    "P4": "After the project is created, the <code>BootstrapBlazorApp</code> solution will be generated in the current folder, and the <code>src</code> directory contains <code>Server-Side</code> <code>Wasm</code> Both types of projects can be run directly with <kbd>F5</kbd>",
+    "P5": "3. Uninstall project template",
+    "SubTitle1": "Bootstrap Blazor App Extension",
+    "P6": "In order to facilitate the use of the <code>Bootstrap Blazor</code> component library, the author has created the <b>Project Template (<code>Bootstrap Blazor Project Template</code>)</b> extension plug-in, which can be installed through <code >Visual Studio 2019 IDE</code> When creating a new project, select the <code>Bootstrap Blazor project template</code>, and the solution is built in two types: <code>Server-Side</code> and <cide>wasm</cide> project"
+  },
+  "BootstrapBlazor.Shared.Pages.Golbalization": {
+    "Title": "Globalization",
+    "SubTitle": "ASP.NET Core Blazor Globalization",
+    "P1": "Please check <a href='https://docs.microsoft.com/zh-cn/aspnet/core/blazor/globalization-localization?view=aspnetcore-3.1' target='_blank'> before reading the following knowledge points Official document</a>"
+  },
+  "BootstrapBlazor.Shared.Pages.Components.InstallContent": {
+    "H1": "Component reference",
+    "P1": "There are many ways to reference components, please refer to <a href='install'>Class Library Installation</a>",
+    "H2": "CSS file",
+    "P2": "Add the Bootstrap CSS file in the form of <code>&lt;link&gt;</code> tags to the <code>@HostFile</code> file <code>&lt;head&gt;</code> tags, and place them in all Before other style sheets.",
+    "Tips": "After this set of components version <b>5.0.32</b> remove the built-in <code>font-awesome</code> icon, please download it yourself or use the <b>CDN</b> acceleration service",
+    "Pre": "&lt;link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'&gt;&lt;link href='_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css' rel='stylesheet'&gt;",
+    "Tips2": "If you use the <code>Blazor App</code> template to create a project, please remove the default <code>Bootstrap</code> style link <code>&lt;link rel='stylesheet' href='css/bootstrap/bootstrap .min.css' /&gt;</code>",
+    "H3": "JS file",
+    "P3": "Many components provided by Bootstrap rely on JavaScript to run. Specifically, these components rely on jQuery, Popper.js, and our own JavaScript plug-ins. Put the following <code>&lt;script&gt;</code> tag at the end of the <code>@HostFile</code> file and before the <code>&lt;/body&gt;</code> tag, it will work.",
+    "Pre2": "&lt;script src='_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js'&gt;&lt;/script&gt;",
+    "H4": "Add the namespace to the <code>_Imports.razor</code> file",
+    "H5": "Registration Service",
+    "H6": "Use components",
+    "P4": "Reference the <code>BootstrapBlazor</code> component in the <code>razor</code> component",
+    "Pre3": "&lt;Button Color='Color.Primary'&gt;Button&lt;/Button&gt;"
+  },
+  "BootstrapBlazor.Shared.Pages.Install_Server": {
+    "Title": "Server Side",
+    "CodeComment": "Add this line of code"
+  },
+  "BootstrapBlazor.Shared.Pages.Install_wasm": {
+    "Title": "Client Side",
+    "CodeComment": "Add this line of code"
   },
   "BootstrapBlazor.Shared.Pages.Components.Block": {
     "Title": "",
     "SubTitle": "Demo"
   },
+  "BootstrapBlazor.Shared.Pages.Components.Tips": {
+    "Title": "Tips"
+  },
   "BootstrapBlazor.Shared.Pages.Components.AttributeTable": {
     "Title": "Attributes"
   },
@@ -56,6 +205,11 @@
     "ShowBarUsageText": "With Bar",
     "IntroText4": "Show <code>Tip</code>"
   },
+  "BootstrapBlazor.Shared.Pages.DateTimePickers": {
+    "SubmitText": "Save",
+    "ModelValidateValue": "ModelValidateValue",
+    "ModelValidateValue.Required": "{0} is required."
+  },
   "BootstrapBlazor.Shared.Pages.Selects": {
     "PlaceHolder": "Not Select"
   },
@@ -92,7 +246,9 @@
     "Foo.Name": "Zhangsan {0}",
     "Foo.Address": "Lane {0} of Jinshajiang Road, Putuo District, Shanghai",
     "Foo.Address2": "Earth, China, Lane {0} of Jinshajiang Road, Putuo District, Shanghai. Here is an example of super long cell",
-    "Foo.BindValue": "BindValue"
+    "Foo.BindValue": "BindValue",
+    "True": "Pass",
+    "False": "Failed"
   },
   "BootstrapBlazor.Shared.Pages.ValidateForms.ComplexFoo": {
     "Name": "Name",
@@ -131,10 +287,11 @@
     "FlowText": "Workflow",
     "InstallAppText": "Install PWA App",
     "InstallText": "Install",
-    "CancelText": "Cancel"
+    "CancelText": "Cancel",
+    "Title": "View update log"
   },
   "BootstrapBlazor.Shared.Shared.NavMenu": {
-    "GetStarted": "GETTINGSTARTED",
+    "GetStarted": "GETTING STARTED",
     "Introduction": "Introduction",
     "Install": "Install",
     "ProjectTemplate": "Template",
@@ -190,6 +347,7 @@
     "DateTimeRange": "DateTimeRange",
     "Editor": "Editor",
     "EditorForm": "EditorForm",
+    "FloatingLabel": "FloatingLabel",
     "Input": "Input",
     "InputNumber": "InputNumber",
     "Markdown": "Markdown",
@@ -213,7 +371,6 @@
     "Camera": "Camera",
     "Captcha": "Captcha",
     "Carousel": "Carousel",
-    "Chart": "Chart",
     "Circle": "Circle",
     "Collapse": "Collapse",
     "Display": "Display",
@@ -234,7 +391,9 @@
     "TableBase": "Base",
     "TableRow": "Row",
     "TableColumn": "Column",
+    "TableCell": "Cell",
     "TableDetail": "Detail",
+    "TableDynamic": "Dynamic",
     "TableSearch": "Search",
     "TableFilter": "Sort/Filter",
     "TableFixHeader": "FixHeader",
@@ -251,9 +410,18 @@
     "TableWrap": "Wrap",
     "TableTree": "Table-Tree",
     "TableLaoding": "Table-Loading",
+    "TableLookup": "Lookup",
     "MenuAccordion": "Accordion",
     "MenuExpandAll": "Expand",
-    "Empty": "Empty"
+    "Empty": "Empty",
+    "Charts": "Chart",
+    "ChartSummary": "Introduction",
+    "ChartLine": "Line",
+    "ChartBar": "Bar",
+    "ChartPie": "Pie",
+    "ChartDoughnut": "Doughnut",
+    "ChartBubble": "Bubble",
+    "Transition": "Transition"
   },
   "BootstrapBlazor.Shared.Pages.Menus": {
     "System": "System",
@@ -282,7 +450,59 @@
     "SubMenu41": "Sub Menu 41",
     "SubMenu42": "Sub Menu 42"
   },
-  "BootstrapBlazor.Shared.Pages.Empty": {
-
+  "BootstrapBlazor.Shared.Pages.Empties": {
+    "Title": "Empty",
+    "SubTitle": "Sub Title PlaceHolder"
+  },
+  "BootstrapBlazor.Shared.Pages.Table.TablesFooter": {
+    "Left": "Left",
+    "Center": "Center",
+    "Right": "Right"
+  },
+  "BootstrapBlazor.Shared.Pages.Table.TablesDetailRow": {
+    "DetailTextTrue": "Enable",
+    "DetailTextFalse": "Disable"
+  },
+  "BootstrapBlazor.Shared.Pages.Table.Tables": {
+    "RefreshText": "Refresh",
+    "ButtonAddColumnText": "Add Column",
+    "ButtonRemoveColumnText": "Remove Column"
+  },
+  "BootstrapBlazor.Shared.Pages.Introduction": {
+    "Title": "Introduction",
+    "P1": "BootstrapBlazor is an enterprise-level component library based on Bootstrap and Blazor, which can be considered as the Blazor version of the Bootstrap project.",
+    "P2": "The dependency is：BootstrapBlazor > Bootstrap > jQuery",
+    "P3": "In the latest <a href='template' target='_blank'>Project Template</a> ,the above dependencies are packaged and bundled, which greatly simplifies use",
+    "UpdateTitle": "Update Log",
+    "P4": "This component may be released every day <b><code>beta</code></b> version, every <b><code>Thursday</code></b> release <b><code>official version </code></b> <a id='log' data-bs-toggle='popover' title='Update log' data-bs-content='This component may have <b><code >beta</code></b> version released, every <b><code>Thursday</code></b> release <b><code>official version</code></b> update log' data-bs-html='true' href='{0}' target='_blank'>Update log</a>",
+    "LearnTitle": "Learning materials",
+    "LearnLi1": "Blazor Official Document",
+    "LearnLi2": "Use Blazor WebAssembly and Visual Studio Code to generate web applications",
+    "LearnLi3": "What is Blazor",
+    "LearnLi4": "Exercise-Configure the development environment",
+    "LearnLi5": "Blazor Components",
+    "LearnLi6": "Exercise-Add Components",
+    "LeanrnLi7": "Data binding and events",
+    "LearnLi8": "Exercise-Data binding and Events",
+    "Summarize": "Summarize",
+    "ProjectsShow": "Gllery",
+    "P5": "The largest code hosting collaborative development platform in China <b><a href='{0}' target='_blank'>Gitee</a></b> C# The highest star in the sector <a href='{1}'><img src='{2}' alt='star' style='margin-bottom',: '1px;' ></a> Works <b><a href='{3}' target=''_blank'>Universal background management system BootstrapAdmin</a></b> Ready to use this component to achieve all functions",
+    "ShowWebSiteTitle": "Demo Site",
+    "GetStarted": "Get Started",
+    "QuikStart": "Quick Start",
+    "Features": "Features of Components",
+    "P6": "The Bootstrap Blazor UI component library provides everything from basic <code>Button</code> components to advanced web-level <code>SmartPage</code> components",
+    "Advantage": "Advantage",
+    "AdvantageLi1": "No need to write <code>Javascript</code> to use components",
+    "AdvantageLi2": "The component supports all <code>html</code> features",
+    "AdvantageLi3": "The component supports two-way data binding",
+    "AdvantageLi4": "Components support automatic client verification",
+    "AdvantageLi5": "Component support combination",
+    "Community": "Community"
+  },
+  "BootstrapBlazor.Shared.Pages.Components.QQGroup": {
+    "Group": "QQ Group",
+    "Status": " Full",
+    "Welcome": "Welcome to join the group discussion"
   }
 }

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -1,11 +1,160 @@
 {
   "BootstrapBlazor.Shared.App": {
-    "Title": "Bootstrap Blazor - 企业级 UI 组件库"
+    "Reload": "重新加载",
+    "ErrorMessage": "发生了未处理的异常。有关详细信息，请参见浏览器开发工具。"
+  },
+  "BootstrapBlazor.Shared.Pages.Index": {
+    "BodyClassString": "welcome-body",
+    "Title": "Bootstrap Blazor - 企业级 UI 组件库",
+    "HeaderTitle": "Bootstrap 风格的 Blazor UI 组件库",
+    "HeaderDesc": "基于 <code>Bootstrap</code> 样式库精心打造，并且额外增加了 {0} 多种常用的组件，为您快速开发项目带来非一般的感觉",
+    "HeaderBody": "致力于打造全网",
+    "HeaderBody1": "最好玩的组件库",
+    "DynamicText": "最好用的",
+    "DynamicText1": "最好看的",
+    "DynamicText2": "最简单实用的",
+    "TagTitle": "组件",
+    "Span1": "树形组件",
+    "Span2": "菜单组件",
+    "Span3": "标签组件",
+    "Span4": "表格组件",
+    "Span5": "布局组件",
+    "Span6": "通知组件",
+    "Span7": "上传组件",
+    "Span8": "开关组件",
+    "CarouselH1": "Chart 图表组件",
+    "CarouselP1": "提供常用的多种图表组件",
+    "CarouselH2": "Chart 图标组件",
+    "CarouselP2": "多维度数据对比",
+    "CarouselH3": "全功能表格组件",
+    "CarouselP3": "具备增删改查搜、分页、排序所有功能",
+    "CarouselH4": "超强时间线功能",
+    "CarouselP4": "自定义节点显示任意组件",
+    "ContainerH1": "丰富组件",
+    "ContainerD1": "本套组件库包含超过 {0} 多个组件，从简单的按钮到复杂的整页面级别的组件",
+    "ContainerH2": "性能",
+    "ContainerD2": "每个控件都经过微调，优化父子组件之间刷新逻辑，避免多次循环更新",
+    "ContainerH3": "简单易用",
+    "ContainerD3": "轻松掌握组件使用方法，快速将 BootstrapBlazor 控件融入到项目中",
+    "ContainerH4": "免费开源",
+    "ContainerD4": "简单、直接、免费使用、无依赖组件，依赖 jQuery Bootstrap 均已内置",
+    "ContainerH5": "演示与示例",
+    "ContainerD5": "详细文档与在线演示，功能设置简单，直接拷贝代码开箱即用",
+    "ContainerH6": "持续更新",
+    "ContainerD6": "码云平台托管开源，永不闭源，持续更新，及时响应问题与反馈",
+    "DonateH1": "捐助",
+    "DonateH2": "扫码捐助请作者喝一杯咖啡"
+  },
+  "BootstrapBlazor.Shared.Shared.HomeLayout": {
+    "FooterH1": "相关作品",
+    "FooterLi1": "滑块验证码",
+    "FriendLink": "友情链接",
+    "FriendLi1": "林德熙的博客",
+    "FriendLi2": "驰骋工作流",
+    "Community": "社区",
+    "CommunityLi1": "贡献指南",
+    "CommunityLi2": "加入我们",
+    "CommunityLi3": "联系方式",
+    "SpecialAcknowledgements": "特别鸣谢",
+    "Footer": "码云托管平台"
+  },
+  "BootstrapBlazor.Shared.Pages.labels": {
+    "Title": "组件标签",
+    "P1": "本套组件中有 <code>ValidateForm</code> <code>EditorForm</code> 以及多种继承 <code>ValidateBase&lt;TValue&gt;</code> 的 <b>表单组件</b>，这些组件中有一套特殊的显示前置标签逻辑，现在我们统一的梳理一下：",
+    "UlLi1": "<a href='/validateforms' target='_blank'>ValidateForm</a> 组件是 <b>可验证的</b> 表单组件，此组件内的表单组件会自动进行数据合规性检查，如果数据不合规将会阻止 <b>提交(Submit)</b> 动作，是数据提交中使用最最最频繁的组件",
+    "UlLi2": "<a href='/editorforms' target='_blank'>EditorForm</a> 组件是普通的表单组件，此组件绑定 <code>Model</code> 后即可自动生成整个表单，大大减少重复性编码，外面套上 <code>ValidateForm</code> 即可开启 <b>数据合规性检查</b> 非常方便、简洁、高效",
+    "P2": "以 <a href='inputs' target='_blank'>BootstrapInput</a> 输入框组件为例，阐述一下是否显示 <code>Label</code> 逻辑",
+    "Tips": "<code>ShowLabel</code> 的逻辑即就近原则，离自身越近的设置生效，如表单组件内置到 <code>ValidateForm</code> 组件中，即使 <code>ValidateForm</code> 设置 <code>ShowLabel=true</code>，表单组件自身设置 <code>ShowLabel=false</code> 时，标签最终结果为 <b>不显示</b>",
+    "Block1Title": "单独使用",
+    "Block1Intro": "适用于数据录入",
+    "Block1P1": "未使用双向绑定时",
+    "Block1Li1": "默认不会显示 <code>Label</code>",
+    "Block1Li2": "通过 <code>ShowLabel</code> 属性进行控制是否显示",
+    "Block1Li3": "设置 <code>DisplayText</code> 时显示内容",
+    "Block1Li4": "未设置时渲染一个无内容的 <code>label</code> 组件进行占位",
+    "GroupBox1Title": "未双向绑定",
+    "GroupBox1D1": "第一个文本框未进行任何设置，不显示标签",
+    "GroupBox1D2": "第二个文本框设置 <code>ShowLabel='true' DisplayText=''</code> 显示无内容的占位标签",
+    "GroupBox1D3": "第三个文本框设置 <code>ShowLabel='true' DisplayText='Name'</code> 显示设置的内容标签",
+    "GroupBox1D4": "第四个文本框设置 <code>ShowLabel='true' DisplayText='@@null'</code> 显示无内容的占位标签",
+    "P3": "使用双向绑定时",
+    "GroupBox2Title": "双向绑定",
+    "GroupBox2D1": "第一个文本框设置 <code>@@bind-Value='Dummy.Name'</code>，不显示标签",
+    "GroupBox2D2": "第二个文本框设置 <code>@@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@@Localizer[nameof(Foo.Address)]'</code> 显示设置的内容",
+    "GroupBox2D3": "第三个文本框设置 <code>@@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=''</code> 显示无内容占位标签",
+    "GroupBox2D4": "第四个文本框设置 <code>@@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@@null'</code> 显示资源文件机制下的标签内容 <code>Label</code>",
+    "Block2Title": "EditorForm 中使用",
+    "Block2Intro": "未套 <code>ValidateForm</code> 中使用",
+    "P4": "<b>显示标签</b><div>未设置 <coe>EditorForm</coe> 组件的 <code>ShowLabel</code> 属性，未设置时等同于设置为 <code>true</code>，所有组件 <b>显示</b> 标签</div>",
+    "P5": "<b>不显示标签</b><div>设置 <code>ShowLabel='false'</code>，组件内的所有表单组件 <b>不显示</b> 标签</div>",
+    "Block3Title": "EditorForm 内置 ValidateForm 中使用",
+    "Block3Intro": "外置 <code>ValidateForm</code> 中使用",
+    "P6": "<b>显示标签</b><div>未设置 <coe>EditorForm</coe> 组件的 <code>ShowLabel</code> 属性，未设置时等同于设置为 <code>true</code>，所有组件 <b>显示</b> 标签</div>",
+    "P7": "<b>不显示标签</b><div>设置 <code>ShowLabel='false'</code>，组件内的所有表单组件 <b>不显示</b> 标签</div>",
+    "Block4Title": "ValidateForm 中使用",
+    "Block4Intro": "默认自动开启显示标签",
+    "P8": "<b>显示标签</b><div>未设置 <coe>EditorForm</coe> 组件的 <code>ShowLabel</code> 属性，未设置时等同于设置为 <code>true</code>，所有组件 <b>显示</b> 标签</div>",
+    "P9": "<b>不显示标签</b><div>设置 <code>ShowLabel='false'</code>，组件内的所有表单组件 <b>不显示</b> 标签</div>"
   },
   "BootstrapBlazor.Shared.Pages.Components.Block": {
     "Title": "未设置",
     "SubTitle": "示例"
   },
+  "BootstrapBlazor.Shared.Pages.Install": {
+    "InstallTitle": "安装",
+    "GitP1": "Git 工具有很多种大家比较熟悉的，这里我介绍两款 Git 客户端工具",
+    "GitP2": "推荐使用 <a href='https://fork.dev'>Fork</a> 工具进行安装，它能更好地和 <a href='https://visualstudio.microsoft.com/vs/getting-started/' target='_blank'>Visutal Studio</a> 开发工具配合使用。",
+    "NugetInstall": "Nuget 安装",
+    "NugetP1": "使用 <a href='https://www.nuget.org/packages?q=BootstrapBlazor' target='_blank'>nuget.org</a> 进行 BootstrapBlazor 组件的安装",
+    "EnvBuildTitle": "项目环境搭建",
+    "EnvLi1": "安装 .net core sdk <a href='http://www.microsoft.com/net/download' target='_blan'>官方网址</a>",
+    "EnvLi2": "安装 Visual Studio 2019 以上 <a href='https://visualstudio.microsoft.com/vs/getting-started' target='_blank'>官方网址</a>",
+    "EnvLi3": "拉取项目代码 BootstrapBlazor <a href='https://gitee.com/LongbowEnterprise/BootstrapBlazor' target='_blank'>仓库网址</a>"
+  },
+  "BootstrapBlazor.Shared.Pages.Template": {
+    "Title": "项目模板",
+    "SubTitle": "Bootstrap Blazor App 模板",
+    "P1": "为了方便大家利用这套组件快速搭建项目，作者制作了 <b>项目模板（<code>Project Templates</code>）</b>，使用 <code>dotnet new</code> 命令行模式，使用步骤如下：",
+    "P2": "1. 安装项目模板",
+    "P3": "2. 创建工程",
+    "P4": "创建工程后在当前文件夹内会生成 <code>BootstrapBlazorApp</code> 解决方案，<code>src</code> 目录内包含 <code>Server-Side</code> <code>Wasm</code> 两种类型的工程，均可以直接 <kbd>F5</kbd> 运行",
+    "P5": "3. 卸载项目模板",
+    "SubTitle1": "Bootstrap Blazor App Extension 扩展插件",
+    "p6": "为了方便使用 <code>Bootstrap Blazor</code> 组件库，作者制作了 <b>项目模板（<code>Bootstrap Blazor Project Template</code>）</b> 扩展插件，安装此插件可通过 <code>Visual Studio 2019 IDE</code> 新建项目时选择 <code>Bootstrap Blazor 项目模板</code>，解决方案内置 <code>Server-Side</code> 与 <cide>wasm</cide> 两种类型工程"
+  },
+  "BootstrapBlazor.Shared.Pages.Golbalization": {
+    "Title": "全球化",
+    "SubTitle": "ASP.NET Core Blazor 全球化",
+    "P1": "阅读以下知识点前请先查看 <a href='https://docs.microsoft.com/zh-cn/aspnet/core/blazor/globalization-localization?view=aspnetcore-3.1' target='_blank'>微软官方文档</a>"
+  },
+  "BootstrapBlazor.Shared.Pages.Components.InstallContent": {
+    "H1": "组件引用",
+    "P1": "组件引用有多种方法，可以参阅 <a href='install'>类库安装</a>",
+    "H2": "CSS 文件",
+    "P2": "将 Bootstrap 的 CSS 文件以 <code>&lt;link&gt;</code> 标签的形式添加到 <code>@HostFile</code> 文件 <code>&lt;head&gt;</code> 标签中，并放置在所有其它样式表之前。",
+    "Tips": "本套组件 <b>5.0.32</b> 版本后移除内置 <code>font-awesome</code> 图标，请自行下载或者使用 <b>CDN</b> 加速服务",
+    "Pre": "&lt;link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'&gt;&lt;link href='_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css' rel='stylesheet'&gt;",
+    "Tips2": "如果是使用 <code>Blazor App</code> 模板创建的工程请移除默认的 <code>Bootstrap</code> 样式链接 <code>&lt;link rel='stylesheet' href='css/bootstrap/bootstrap.min.css' /&gt;</code>",
+    "H3": "JS 文件",
+    "P3": "Bootstrap 所提供的许多组件都依赖 JavaScript 才能运行。具体来说，这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。将以下 <code>&lt;script&gt;</code> 标签放到 <code>@HostFile</code> 文件尾部且在 <code>&lt;/body&gt;</code> 标签之前即可起作用。",
+    "Pre2": "&lt;script src='_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js'&gt;&lt;/script&gt;",
+    "H4": "添加命名空间到 <code>_Imports.razor</code> 文件",
+    "H5": "注册服务",
+    "H6": "使用组件",
+    "P4": "在 <code>razor</code>组件中引用 <code>BootstrapBlazor</code> 组件",
+    "Pre3": "&lt;Button Color='Color.Primary'&gt;主要按钮&lt;/Button&gt;"
+  },
+  "BootstrapBlazor.Shared.Pages.Install_Server": {
+    "Title": "服务端渲染模式",
+    "CodeComment": "添加本行代码"
+  },
+  "BootstrapBlazor.Shared.Pages.Install_wasm": {
+    "Title": "客户端渲染模式",
+    "CodeComment": "添加本行代码"
+  },
+  "BootstrapBlazor.Shared.Pages.Components.Tips": {
+    "Title": "小提示"
+  },
   "BootstrapBlazor.Shared.Pages.Components.AttributeTable": {
     "Title": "Attributes 属性"
   },
@@ -56,6 +205,11 @@
     "ShowBarUsageText": "显示左侧 Bar",
     "IntroText4": "作为 <code>Tip</code> 使用"
   },
+  "BootstrapBlazor.Shared.Pages.DateTimePickers": {
+    "SubmitText": "保存",
+    "ModelValidateValue": "属性",
+    "ModelValidateValue.Required": "{0}为必填项"
+  },
   "BootstrapBlazor.Shared.Pages.Selects": {
     "PlaceHolder": "未选择"
   },
@@ -92,7 +246,9 @@
     "Foo.Name": "张三 {0}",
     "Foo.Address": "上海市普陀区金沙江路 {0} 弄",
     "Foo.Address2": "地球、中国、上海市普陀区金沙江路 {0} 弄 这里是超长单元格示例",
-    "Foo.BindValue": "绑定值"
+    "Foo.BindValue": "绑定值",
+    "True": "通过",
+    "False": "未通过"
   },
   "BootstrapBlazor.Shared.Pages.ValidateForms.ComplexFoo": {
     "Name": "姓名",
@@ -131,7 +287,8 @@
     "FlowText": "工作流",
     "InstallAppText": "安装小程序",
     "InstallText": "安装",
-    "CancelText": "取消"
+    "CancelText": "取消",
+    "Title": "点击查看更新日志"
   },
   "BootstrapBlazor.Shared.Shared.NavMenu": {
     "GetStarted": "快速上手",
@@ -169,6 +326,7 @@
     "Dialog": "对话框 Dialog",
     "Drawer": "抽屉 Drawer",
     "EditDialog": "编辑弹窗 EditDialog",
+    "FloatingLabel": "悬浮标签 FloatingLabel",
     "Message": "消息框 Message",
     "Modal": "模态框 Modal",
     "Light": "指示灯 Light",
@@ -213,7 +371,6 @@
     "Camera": "摄像头 Camera",
     "Captcha": "验证码 Captcha",
     "Carousel": "走马灯 Carousel",
-    "Chart": "图表 Chart",
     "Circle": "进度环 Circle",
     "Collapse": "折叠 Collapse",
     "Display": "数据显示 Display",
@@ -234,7 +391,9 @@
     "TableBase": "基本功能",
     "TableRow": "行设置",
     "TableColumn": "列设置",
+    "TableCell": "单元格",
     "TableDetail": "明细行",
+    "TableDynamic": "动态表格",
     "TableSearch": "搜索功能",
     "TableFilter": "筛选和排序",
     "TableFixHeader": "固定表头",
@@ -251,9 +410,18 @@
     "TableWrap": "折行演示",
     "TableTree": "树形数据",
     "TableLaoding": "数据加载",
+    "TableLookup": "外键数据源",
     "MenuAccordion": "手风琴效果",
     "MenuExpandAll": "全部展开",
-    "Empty": "空状态 Empty"
+    "Empty": "空状态 Empty",
+    "Charts": "图表 Chart",
+    "ChartSummary": "简介",
+    "ChartLine": "折线图",
+    "ChartBar": "柱状图",
+    "ChartPie": "饼图",
+    "ChartDoughnut": "圆环图",
+    "ChartBubble": "气泡图",
+    "Transition": "过渡效果"
   },
   "BootstrapBlazor.Shared.Pages.Menus": {
     "System": "系统设置",
@@ -282,8 +450,59 @@
     "SubMenu41": "曾曾孙菜单 41",
     "SubMenu42": "曾曾孙菜单 42"
   },
-  "BootstrapBlazor.Shared.Pages.Emptys": {
+  "BootstrapBlazor.Shared.Pages.Empties": {
     "Title": "Empty 空状态",
-    "subTitle": "空状态时的展示占位图"
+    "SubTitle": "空状态时的展示占位图"
+  },
+  "BootstrapBlazor.Shared.Pages.Table.TablesFooter": {
+    "Left": "左对齐",
+    "Center": "居中",
+    "Right": "右对齐"
+  },
+  "BootstrapBlazor.Shared.Pages.Table.TablesDetailRow": {
+    "DetailTextTrue": "关闭明细行",
+    "DetailTextFalse": "开启明细行"
+  },
+  "BootstrapBlazor.Shared.Pages.Table.Tables": {
+    "RefreshText": "刷新",
+    "ButtonAddColumnText": "增加列",
+    "ButtonRemoveColumnText": "移除列"
+  },
+  "BootstrapBlazor.Shared.Pages.Introduction": {
+    "Title": "简介",
+    "P1": "BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。",
+    "P2": "依赖关系为：BootstrapBlazor > Bootstrap > jQuery",
+    "P3": "最新 <a href='template' target='_blank'>项目模板</a> 中将以上依赖进行了打包捆绑大大简化使用",
+    "UpdateTitle": "更新日志",
+    "P4": "本组件目前每天可能有 <b><code>beta</code></b> 版本发布，每 <b><code>周四</code></b> 发布 <b><code>正式版</code></b> 更新日志 <a id='log' data-bs-toggle='popover' title='更新日志' data-bs-content='本组件目前每天可能有 <b><code>beta</code></b> 版本发布，每 <b><code>周四</code></b> 发布 <b><code>正式版</code></b> 更新日志' data-bs-html='true' href='{0}' target='_blank'>[传送门]</a>",
+    "LearnTitle": "学习资料",
+    "LearnLi1": "Blazor 官方文档",
+    "LearnLi2": "使用 Blazor WebAssembly 和 Visual Studio Code 生成 Web 应用",
+    "LearnLi3": "什么是 Blazor",
+    "LearnLi4": "练习 - 配置开发环境",
+    "LearnLi5": "Blazor 组件",
+    "LearnLi6": "练习 - 添加组件",
+    "LeanrnLi7": "数据绑定和事件",
+    "LearnLi8": "练习 - 数据绑定和事件",
+    "Summarize": "总结",
+    "ProjectsShow": "作品展示",
+    "P5": "国内最大代码托管协作开发平台 <b><a href='{0}' target='_blank'>码云</a></b> C# 板块最高星 <a href='{1}'><img src={2}' alt='star' style='margin-bottom',: '1px;' ></a> 作品 <b><a href='{3}' target=''_blank'>通用后台管理系统 BootstrapAdmin</a></b> 准备使用本组件实现全部功能",
+    "ShowWebSiteTitle": "演示网站",
+    "GetStarted": "快速上手",
+    "QuikStart": "快速入门",
+    "Features": "组件特色",
+    "P6": "Bootstrap Blazor UI 组件库提供了从基本的 <code>Button</code> 组件到高级的网页级 <code>SmartPage</code> 组件",
+    "Advantage": "优势",
+    "AdvantageLi1": "使用组件无需编写 <code>Javascript</code>",
+    "AdvantageLi2": "组件支持所有 <code>html</code> 特性",
+    "AdvantageLi3": "组件支持数据双向绑定",
+    "AdvantageLi4": "组件支持自动客户端验证",
+    "AdvantageLi5": "组件支持组合",
+    "Community": "交流群"
+  },
+  "BootstrapBlazor.Shared.Pages.Components.QQGroup": {
+    "Group": "QQ群",
+    "Status": "满",
+    "Welcome": "欢迎加群讨论"
   }
 }

src/BootstrapBlazor.Shared/Pages/Components/ChartToast.cs

@@ -0,0 +1,82 @@
+// 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 Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.JSInterop;
+using System;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Components
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class ChartToast : ComponentBase, IDisposable
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        [Inject]
+        private ToastService? ToastService { get; set; }
+
+        [Inject]
+        private IJSRuntime? JSRuntime { get; set; }
+
+        private JSInterop<ChartToast>? Interope { get; set; }
+
+        /// <summary>
+        /// BuildRenderTree 方法
+        /// </summary>
+        /// <param name="builder"></param>
+        protected override void BuildRenderTree(RenderTreeBuilder builder)
+        {
+            builder.OpenComponent<Toast>(0);
+            builder.CloseComponent();
+        }
+
+        /// <summary>
+        /// OnAfterRenderAsync 方法
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);
+
+            if (firstRender && JSRuntime != null)
+            {
+                if (Interope == null) Interope = new JSInterop<ChartToast>(JSRuntime);
+                await Interope.InvokeVoidAsync(this, "", "_initChart", nameof(ShowToast));
+            }
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [JSInvokable]
+        public void ShowToast()
+        {
+            ToastService?.Show(new ToastOption() { Title = "友情提示", Content = "屏幕宽度过小，如果是手机请横屏观看" });
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="disposing"></param>
+        private void Dispose(bool disposing)
+        {
+            if (disposing) Interope?.Dispose();
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public void Dispose()
+        {
+            Dispose(true);
+            GC.SuppressFinalize(this);
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Components/ComponentCard.razor.cs

@@ -15,7 +15,7 @@ namespace BootstrapBlazor.Shared.Pages.Components
     {
         private string ImageUrl => $"_content/BootstrapBlazor.Shared/images/{Image}";
 
-        private string? ClassString => CssBuilder.Default("form-group col-12 col-sm-6 col-md-4 col-lg-3")
+        private string? ClassString => CssBuilder.Default("col-12 col-sm-6 col-md-4 col-lg-3")
             .AddClass("d-none", !string.IsNullOrEmpty(SearchText) && !Text.Contains(SearchText, System.StringComparison.OrdinalIgnoreCase))
             .Build();
 

src/BootstrapBlazor.Shared/Pages/Components/ComponentCategory.razor

@@ -5,8 +5,8 @@
 
     <h4>@Desc</h4>
 
-    <div class="form-inline coms-demo">
-        <div class="row flex-fill">
+    <div class="coms-demo">
+        <div class="row g-3">
             <CascadingValue Value="this" IsFixed="true">
                 @ChildContent
             </CascadingValue>

src/BootstrapBlazor.Shared/Pages/Components/CustomerSelectDialog.razor

@@ -1,10 +1,8 @@
-<div class="form-inline">
-    <div class="row">
-        <div class="form-group col-12 col-sm-6">
-            <Select TValue="string" Items="@Items3" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
-        </div>
-        <div class="form-group col-12 col-sm-6">
-            <Select TValue="string" Items="@Items2" />
-        </div>
+<div class="row g-3">
+    <div class="col-12 col-sm-6">
+        <Select TValue="string" Items="@Items3" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
+    </div>
+    <div class="col-12 col-sm-6">
+        <Select TValue="string" Items="@Items2" />
     </div>
 </div>

src/BootstrapBlazor.Shared/Pages/Components/DialogBodyFoo.razor

@@ -0,0 +1 @@
+改变标题栏中下拉框此处会更改： @Value

src/BootstrapBlazor.Shared/Pages/Components/DialogBodyFoo.razor.cs

@@ -0,0 +1,35 @@
+// 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 System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Components
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class DialogBodyFoo
+    {
+        private string? Value { get; set; }
+
+        private List<SelectedItem> Items { get; } = new(new[]
+        {
+            new SelectedItem("beijing", "北京"),
+            new SelectedItem("shanghai", "上海")
+        });
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public Task UpdateAsync(string val)
+        {
+            Value = Items.First(i => i.Value == val).Text;
+            StateHasChanged();
+            return Task.CompletedTask;
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Components/DialogHeaderFoo.razor

@@ -0,0 +1,4 @@
+<h5 class="modal-title">自定义 Header</h5>
+<div class="d-flex flex-fill justify-content-end me-3">
+	<Select TValue="string" Items="Items" Value="Value" OnSelectedItemChanged="OnSelectedItemChanged" style="max-width: 120px;" />
+</div>

src/BootstrapBlazor.Shared/Pages/Components/DialogHeaderFoo.razor.cs

@@ -0,0 +1,57 @@
+// 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 Microsoft.AspNetCore.Components;
+using System;
+using System.Collections.Generic;
+using System.Diagnostics.CodeAnalysis;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Components
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class DialogHeaderFoo
+    {
+        [NotNull]
+        private IEnumerable<SelectedItem>? Items { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public string? Value { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public Func<string, Task>? OnValueChanged { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            Items = new[]
+            {
+                new SelectedItem("beijing", "北京"),
+                new SelectedItem("shanghai", "上海")
+            };
+        }
+
+        private async Task OnSelectedItemChanged(SelectedItem item)
+        {
+            Value = item.Value;
+            if (OnValueChanged != null)
+            {
+                await OnValueChanged(Value);
+            }
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Components/InstallContent.razor

@@ -1,40 +1,43 @@
-@using Microsoft.Extensions.DependencyInjection
+@using Microsoft.Extensions.DependencyInjection
 @inject NugetVersionService VersionManager
+@inject IStringLocalizer<InstallContent> Localizer
 
 <h3>@Title</h3>
 
-<h4>组件引用</h4>
+<h4>@Localizer["H1"]</h4>
 
-<p>组件引用有多种方法，可以参阅 <a href="install">类库安装</a></p>
+<p>@Localizer["P1"]</p>
 
 <div class="code-label">.NET CLI</div>
 <Pre class="no-highlight">dotnet add package BootstrapBlazor --version @Version</Pre>
 
-<h5>CSS 文件</h5>
+<h5>@Localizer["H2"]</h5>
 
-<p>将 Bootstrap 的 CSS 文件以 <code>&lt;link&gt;</code> 标签的形式添加到 <code>@HostFile</code> 文件 <code>&lt;head&gt;</code> 标签中，并放置在所有其它样式表之前。</p>
-
-<Pre>&lt;link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet"&gt;</Pre>
+<p>@((MarkupString)Localizer["P2"].Value)</p>
 
 <Tips>
-    <p>如果是使用 <code>Blazozr App</code> 模板创建的工程请移除默认的 <code>Bootstrap</code> 样式链接 <code>&lt;link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /&gt;</code></p>
+    <p>@((MarkupString)Localizer["Tips"].Value)</p>
+</Tips>
+<Pre>@((MarkupString)Localizer["Pre"].Value)</Pre>
+
+<Tips>
+    <p>@((MarkupString)Localizer["Tips2"].Value)</p>
 </Tips>
 
-<h5>JS 文件</h5>
+<h5>@Localizer["H3"]</h5>
 
-<p>Bootstrap 所提供的许多组件都依赖 JavaScript 才能运行。具体来说，这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。将以下 <code>&lt;script&gt;</code> 标签放到 <code>@HostFile</code> 文件尾部且在 <code>&lt;/body&gt;</code> 标签之前即可起作用。</p>
-<Pre>&lt;script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"&gt;&lt;/script&gt;
-</Pre>
+<p>@((MarkupString)Localizer["P3"].Value)</p>
+<Pre>@((MarkupString)Localizer["Pre2"].Value)</Pre>
 
-<h4>添加命名空间到 <code>_Imports.razor</code> 文件</h4>
+<h4>@((MarkupString)Localizer["H4"].Value)</h4>
 
 <Pre>@@using BootstrapBlazor.Components</Pre>
 
-<h4>注册服务</h4>
+<h4>@Localizer["H5"]</h4>
 
 @ChildContent
 
-<h4>使用组件</h4>
+<h4>@Localizer["H6"]</h4>
 
-<p>在 <code>razor</code>组件中引用 <code>BootstrapBlazor</code> 组件</p>
-<Pre>&lt;Button Color="Color.Primary"&gt;主要按钮&lt;/Button&gt;</Pre>
+<p>@((MarkupString)Localizer["P4"].Value)</p>
+<Pre>@((MarkupString)Localizer["Pre3"].Value)</Pre>

src/BootstrapBlazor.Shared/Pages/Components/Pre.razor

@@ -8,7 +8,7 @@
         <pre @attributes="@AdditionalAttributes" class="@ClassName"><code>@ChildContent</code></pre>
         @if (CanCopy)
         {
-            <button type="button" class="btn-clipboard" data-toggle="tooltip" title="点击复制代码">Copy</button>
+            <button type="button" class="btn-clipboard" data-bs-toggle="tooltip" data-bs-placement="left" title="点击复制代码">Copy</button>
         }
     }
 </div>

src/BootstrapBlazor.Shared/Pages/Components/QQGroup.razor

@@ -1,16 +1,17 @@
 @inject IOptions<WebsiteOptions> WebsiteOption
+@inject IStringLocalizer<QQGroup> Localzier
 
 <div>
-    QQ群：BootstrapAdmin & Blazor
+    @Localzier["Group"]：BootstrapAdmin & Blazor
     <a class="mx-1" target="_blank" href="@WebsiteOption.Value.QQGroup1Link">
         <span class="text-danger fa fa-qq">
-            <span class="ml-1"><b>795206915(满)</b></span>
+            <span class="ms-1"><b>795206915(@Localzier["Status"])</b></span>
         </span>
     </a>
     <a class="mx-1" target="_blank" href="@WebsiteOption.Value.QQGroup2Link">
         <span class="text-success fa fa-qq">
-            <span class="ml-1"><b>675147445</b></span>
+            <span class="ms-1"><b>675147445</b></span>
         </span>
     </a>
-    欢迎加群讨论
+    @Localzier["Welcome"]
 </div>

src/BootstrapBlazor.Shared/Pages/Components/State.razor

@@ -1,18 +1,18 @@
 @if (IsNew)
 {
-    <span class="badge badge-danger">
-        <span>NEW</span>
-    </span>
+    <Badge Color="Color.Danger" IsPill="true">
+        NEW
+    </Badge>
 }
 @if (IsUpdate)
 {
-    <span class="badge badge-success">
-        <span>Upd</span>
-    </span>
+    <Badge Color="Color.Success" IsPill="true">
+        Upd
+    </Badge>
 }
 @if (Count > 0)
 {
-    <Badge Color="@BootstrapBlazor.Components.Color.Info" IsPill="true">
+    <Badge Color="Color.Info" IsPill="true">
         @Count
     </Badge>
 }

src/BootstrapBlazor.Shared/Pages/Components/ThemeChooser.razor

@@ -1,7 +1,7 @@
 @inherits BootstrapComponentBase
 
 <div @ref="@ThemeElement" class="theme">
-    <div class="btn btn-theme" data-toggle="tooltip" title="@Title" data-placement="left">
+    <div class="btn btn-theme" data-bs-toggle="tooltip" title="@Title" data-bs-placement="left">
         <div class="theme-bar">
             <span class="theme-color bg-danger"></span>
             <span class="theme-color bg-success"></span>

src/BootstrapBlazor.Shared/Pages/Components/Tips.razor

@@ -1,16 +1,12 @@
 @inherits BootstrapComponentBase
+@inject IStringLocalizer<Tips> Localizer
 
 <Alert AdditionalAttributes="@AdditionalAttributes" ShowBar="true" Color="@Color">
-    <h4><i class="@Icon"></i>@Title</h4>
+    <h4><i class="@Icon"></i>@Localizer["Title"]</h4>
     @ChildContent
 </Alert>
 
 @code {
-    /// <summary>
-    /// 获得/设置 显示文本
-    /// </summary>
-    [Parameter]
-    public string Title { get; set; } = "小技巧";
 
     /// <summary>
     /// 获得/设置 图标

src/BootstrapBlazor.Shared/Pages/Components/TreeDataFoo.cs

@@ -0,0 +1,60 @@
+// 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 System.Collections.Generic;
+using System.Linq;
+
+namespace BootstrapBlazor.Shared.Pages.Components
+{
+    class TreeDataFoo
+    {
+        public string? Code { get; set; }
+
+        public string? ParentCode { get; set; }
+
+        public string? Text { get; set; }
+
+        public string Icon { get; set; } = "fa fa-fa";
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
+        public static List<TreeItem> GetTreeItems()
+        {
+            var items = new List<TreeDataFoo>();
+
+            items.Add(new TreeDataFoo() { Text = "导航一", Code = "1010" });
+            items.Add(new TreeDataFoo() { Text = "导航二", Code = "1020" });
+            items.Add(new TreeDataFoo() { Text = "导航三", Code = "1030" });
+
+            items.Add(new TreeDataFoo() { Text = "子菜单一", Code = "1040", ParentCode = "1020" });
+            items.Add(new TreeDataFoo() { Text = "子菜单二", Code = "1050", ParentCode = "1020" });
+            items.Add(new TreeDataFoo() { Text = "子菜单三", Code = "1060", ParentCode = "1020" });
+
+            items.Add(new TreeDataFoo() { Text = "孙菜单一", Code = "1070", ParentCode = "1050" });
+            items.Add(new TreeDataFoo() { Text = "孙菜单二", Code = "1080", ParentCode = "1050" });
+            items.Add(new TreeDataFoo() { Text = "孙菜单三", Code = "1090", ParentCode = "1050" });
+
+            items.Add(new TreeDataFoo() { Text = "曾孙菜单一", Code = "1100", ParentCode = "1080" });
+            items.Add(new TreeDataFoo() { Text = "曾孙菜单二", Code = "1110", ParentCode = "1080" });
+            items.Add(new TreeDataFoo() { Text = "曾孙菜单三", Code = "1120", ParentCode = "1080" });
+
+            items.Add(new TreeDataFoo() { Text = "曾曾孙菜单一", Code = "1130", ParentCode = "1100" });
+            items.Add(new TreeDataFoo() { Text = "曾曾孙菜单二", Code = "1140", ParentCode = "1100" });
+            items.Add(new TreeDataFoo() { Text = "曾曾孙菜单三", Code = "1150", ParentCode = "1100" });
+
+            // 算法获取属性结构数据
+            return GetSubItems(null, items).ToList();
+        }
+
+        private static List<TreeItem> GetSubItems(string? parentCode, IEnumerable<TreeDataFoo> foos)
+        {
+            var subData = foos.Where(i => i.ParentCode == parentCode);
+
+            return subData.Select(i => new TreeItem() { Text = i.Text, Items = GetSubItems(i.Code, foos) }).ToList();
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Components/Video.razor

@@ -8,7 +8,7 @@
 }
 else
 {
-    <a class="fa fa-video-camera mb-3" href="@VideoUrl" target="_blank"><span class="ml-2">[传送门]</span></a>
+    <a class="fa fa-video-camera mb-3" href="@VideoUrl" target="_blank"><span class="ms-2">[传送门]</span></a>
 }
 
 @code {

src/BootstrapBlazor.Shared/Pages/Components/Widget.razor

@@ -1,4 +1,4 @@
-<DropdownWidget class="text-right flex-fill px-3">
+<DropdownWidget class="text-end flex-fill px-3">
     <DropdownWidgetItem Icon="fa fa-envelope-o" BadgeNumber="4">
         <HeaderTemplate>
             <span>您有 4 个未读消息</span>
@@ -10,7 +10,7 @@
                     <div style="width: 40px; height: 40px;">
                         <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.Small" />
                     </div>
-                    <div class="ml-2">
+                    <div class="ms-2">
                         <div class="d-flex position-relative">
                             <h4>Argo Zhang</h4>
                             <small><i class="fa fa-clock-o"></i> @(4 + index) mins</small>
@@ -33,7 +33,7 @@
             {
                 <a class="dropdown-item d-flex align-items-center" href="#" @onclick:preventDefault>
                     <i class="fa fa-users text-primary"></i>
-                    <div class="ml-2">5 new members joined</div>
+                    <div class="ms-2">5 new members joined</div>
                 </a>
             }
         </BodyTemplate>

src/BootstrapBlazor.Shared/Pages/Coms.razor

@@ -1,7 +1,7 @@
 @page "/components"
 
-<div class="coms-search form-inline">
-    <div class="row flex-fill">
+<div class="coms-search">
+    <div class="row">
         <div class="col-12">
             <Search IgnoreCase="true" IsLikeMatch="true" PlaceHolder="搜索想要的组件" Items="@ComponentItems" OnSearch="@OnSearch"></Search>
         </div>

src/BootstrapBlazor.Shared/Pages/Golbalization.razor

@@ -1,7 +1,8 @@
 @page "/globalization"
+@inject IStringLocalizer<Golbalization> Localizer
 
-<h3>全球化</h3>
+<h3>@Localizer["Title"]</h3>
 
-<h4>ASP.NET Core Blazor 全球化</h4>
+<h4>@Localizer["SubTitle"]</h4>
 
-<p>阅读以下知识点前请先查看 <a href="https://docs.microsoft.com/zh-cn/aspnet/core/blazor/globalization-localization?view=aspnetcore-3.1" target="_blank">微软官方文档</a></p>
+<p>@((MarkupString)Localizer["P1"].Value)</p>

src/BootstrapBlazor.Shared/Pages/Index.razor

@@ -7,184 +7,179 @@
 
 <section class="home-section">
     <div class="welcome container">
-        <div class="form-inline">
-            <div class="row">
-                <div class="col-12 col-lg-6">
-                    <div class="welcome-header">
-                        <h4>
-                            Bootstrap 风格的 Blazor UI 组件库
-                        </h4>
-                        <div>基于 <code>Bootstrap</code> 样式库精心打造，并且额外增加了 @Options.Value.TotalCount 多种常用的组件，为您快速开发项目带来非一般的感觉</div>
-                        <div class="welcome-body">
-                            致力于打造全网<span @ref="TypeElement" class="typed"></span><span class="typed-cursor">|</span>
-                            <div>最好玩的组件库</div>
-                        </div>
-                    </div>
-                    <div class="welcome-footer">
-                        <div class="d-flex flex-wrap">
-                            <span role="alert" class="tag alert fade show alert-primary" data-toggle="tooltip" title="Tree 组件">
-                                树形组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-success" data-toggle="tooltip" title="Menu 组件">
-                                菜单组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-warning" data-toggle="tooltip" title="Tab Tag Alert 组件">
-                                标签组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-secondary" data-toggle="tooltip" title="Table 组件">
-                                表格组件
-                            </span>
-                        </div>
-                        <div class="d-flex flex-wrap">
-                            <span role="alert" class="tag alert fade show alert-danger" data-toggle="tooltip" title="Layout Split 组件">
-                                布局组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-info" data-toggle="tooltip" title="Dialog Message Toast 组件">
-                                通知组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-dark" data-toggle="tooltip" title="Upload 组件">
-                                上传组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-success" data-toggle="tooltip" title="Swith Toogle 组件">
-                                开关组件
-                            </span>
-                        </div>
+        <div class="row g-3">
+            <div class="col-12 col-lg-6 position-relative">
+                <div class="welcome-header">
+                    <h4>
+                        @Localizer["HeaderTitle"]
+                    </h4>
+                    <div>@((MarkupString)Localizer["HeaderDesc", Options.Value.TotalCount].Value)</div>
+                    <div class="@BodyClassString">
+                        @Localizer["HeaderBody"]<span @ref="TypeElement" class="typed"></span><span class="typed-cursor">|</span>
+                        <div>@Localizer["HeaderBody1"]</div>
                     </div>
                 </div>
-                <div class="col-12 col-lg-6">
-                    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
-                        <ol class="carousel-indicators">
-                            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
-                            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
-                            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
-                            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
-                        </ol>
-                        <div class="carousel-inner">
-                            <div class="carousel-item active">
-                                <div class="bar">
-                                    <div class="carousel-img">
-                                        <img src="_content/BootstrapBlazor.Shared/images/bar.gif" />
-                                    </div>
-                                    <div class="carousel-caption">
-                                        <h5>Chart 图表组件</h5>
-                                        <p>提供常用的多种图表组件</p>
-                                    </div>
+                <div class="welcome-footer">
+                    <div class="d-flex flex-wrap">
+                        <span role="alert" class="tag alert fade show alert-primary" data-bs-toggle="tooltip" title="Tree @Localizer["TagTitle"]">
+                            @Localizer["Span1"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-success" data-bs-toggle="tooltip" title="Menu @Localizer["TagTitle"]">
+                            @Localizer["Span2"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-warning" data-bs-toggle="tooltip" title="Tab Tag Alert @Localizer["TagTitle"]">
+                            @Localizer["Span3"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-secondary" data-bs-toggle="tooltip" title="Table @Localizer["TagTitle"]">
+                            @Localizer["Span4"]
+                        </span>
+                    </div>
+                    <div class="d-flex flex-wrap">
+                        <span role="alert" class="tag alert fade show alert-danger" data-bs-toggle="tooltip" title="Layout Split @Localizer["TagTitle"]">
+                            @Localizer["Span5"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-info" data-bs-toggle="tooltip" title="Dialog Message Toast @Localizer["TagTitle"]">
+                            @Localizer["Span6"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-dark" data-bs-toggle="tooltip" title="Upload @Localizer["TagTitle"]">
+                            @Localizer["Span7"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-success" data-bs-toggle="tooltip" title="Swith Toogle @Localizer["TagTitle"]">
+                            @Localizer["Span8"]
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-lg-6">
+                <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
+                    <ol class="carousel-indicators">
+                        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
+                        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
+                        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
+                        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3"></li>
+                    </ol>
+                    <div class="carousel-inner">
+                        <div class="carousel-item active">
+                            <div class="bar">
+                                <div class="carousel-img">
+                                    <img src="_content/BootstrapBlazor.Shared/images/bar.gif" />
                                 </div>
-                            </div>
-                            <div class="carousel-item">
-                                <div class="bar">
-                                    <div class="carousel-img">
-                                        <img src="_content/BootstrapBlazor.Shared/images/dought.gif" />
-                                    </div>
-                                    <div class="carousel-caption">
-                                        <h5>Chart 图标组件</h5>
-                                        <p>多维度数据对比</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="carousel-item">
-                                <div class="bar">
-                                    <div class="carousel-img">
-                                        <img src="_content/BootstrapBlazor.Shared/images/table.png" />
-                                    </div>
-                                    <div class="carousel-caption">
-                                        <h5>全功能表格组件</h5>
-                                        <p>具备增删改查搜、分页、排序所有功能</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="carousel-item">
-                                <div class="bar">
-                                    <div class="carousel-img">
-                                        <img src="_content/BootstrapBlazor.Shared/images/timeline.png" />
-                                    </div>
-                                    <div class="carousel-caption">
-                                        <h5>超强时间线功能</h5>
-                                        <p>自定义节点显示任意组件</p>
-                                    </div>
+                                <div class="carousel-caption">
+                                    <h5>@Localizer["CarouselH1"]</h5>
+                                    <p>@Localizer["CarouselP1"]</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <div class="bar">
+                                <div class="carousel-img">
+                                    <img src="_content/BootstrapBlazor.Shared/images/dought.gif" />
+                                </div>
+                                <div class="carousel-caption">
+                                    <h5>@Localizer["CarouselH2"]</h5>
+                                    <p>@Localizer["CarouselP2"]</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <div class="bar">
+                                <div class="carousel-img">
+                                    <img src="_content/BootstrapBlazor.Shared/images/table.png" />
+                                </div>
+                                <div class="carousel-caption">
+                                    <h5>@Localizer["CarouselH3"]</h5>
+                                    <p>@Localizer["CarouselP3"]</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <div class="bar">
+                                <div class="carousel-img">
+                                    <img src="_content/BootstrapBlazor.Shared/images/timeline.png" />
+                                </div>
+                                <div class="carousel-caption">
+                                    <h5>@Localizer["CarouselH4"]</h5>
+                                    <p>@Localizer["CarouselP4"]</p>
                                 </div>
                             </div>
                         </div>
-                        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
-                           data-slide="prev">
-                            <i class="fa fa-angle-left"></i>
-                            <span class="sr-only">Previous</span>
-                        </a>
-                        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
-                           data-slide="next">
-                            <i class="fa fa-angle-right"></i>
-                            <span class="sr-only">Next</span>
-                        </a>
                     </div>
+                    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
+                       data-bs-slide="prev">
+                        <i class="fa fa-angle-left"></i>
+                        <span class="sr-only">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
+                       data-bs-slide="next">
+                        <i class="fa fa-angle-right"></i>
+                        <span class="sr-only">Next</span>
+                    </a>
                 </div>
             </div>
         </div>
     </div>
     <div class="intro container">
-        <div class="form-inline">
-            <div class="row">
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-success">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/components.svg" alt="components" />
-                        </p>
-                        <h3>丰富组件</h3>
-                        <div>本套组件库包含超过 @Options.Value.TotalCount 多个组件，从简单的按钮到复杂的整页面级别的组件</div>
-                    </div>
+        <div class="row g-3">
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-success">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/components.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH1"]</h3>
+                    <div>@((MarkupString)Localizer["ContainerD1", Options.Value.TotalCount].Value)</div>
                 </div>
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-primary">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/performance.svg" alt="components" />
-                        </p>
-                        <h3>性能</h3>
-                        <div>
-                            每个控件都经过微调，优化父子组件之间刷新逻辑，避免多次循环更新
-                        </div>
-                    </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-primary">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/performance.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH2"]</h3>
+                    <div>@Localizer["ContainerD2"]</div>
                 </div>
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-info">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/ease-of-use.svg" alt="components" />
-                        </p>
-                        <h3>简单易用</h3>
-                        <div>轻松掌握组件使用方法，快速将 BootstrapBlazor 控件融入到项目中</div>
-                    </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-info">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/ease-of-use.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH3"]</h3>
+                    <div>@Localizer["ContainerD3"]</div>
                 </div>
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-danger">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/hassel-free-licensing.svg" alt="components" />
-                        </p>
-                        <h3>免费开源</h3>
-                        <div>简单、直接、免费使用、无依赖组件，依赖 jQuery Bootstrap 均已内置</div>
-                    </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-danger">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/hassel-free-licensing.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH4"]</h3>
+                    <div>@Localizer["ContainerD4"]</div>
                 </div>
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-warning">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/demo-and-training.svg" alt="components" />
-                        </p>
-                        <h3>演示与示例</h3>
-                        <div>详细文档与在线演示，功能设置简单，直接拷贝代码开箱即用</div>
-                    </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-warning">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/demo-and-training.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH5"]</h3>
+                    <div>@Localizer["ContainerD5"]</div>
                 </div>
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-secondary">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/frequent-updates.svg" alt="components" />
-                        </p>
-                        <h3>持续更新</h3>
-                        <div>码云平台托管开源，永不闭源，持续更新，及时响应问题与反馈</div>
-                    </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-secondary">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/frequent-updates.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH6"]</h3>
+                    <div>@Localizer["ContainerD6"]</div>
                 </div>
             </div>
         </div>
     </div>
     <div class="donate">
-        <h3>捐助</h3>
-        <h5 class="d-none d-sm-block mb-3">扫码捐助请作者喝一杯咖啡</h5>
+        <h3>@Localizer["DonateH1"]</h3>
+        <h5 class="d-none d-sm-block mb-3">@Localizer["DonateH2"]</h5>
         <img class="barcode" src="https://gitee.com/LongbowEnterprise/Pictures/raw/master/WeChat/BarCode@2x.png" />
+        <div class="wwads-cn wwads-horizontal" data-id="72" style="max-width:350px"></div>
     </div>
 </section>

src/BootstrapBlazor.Shared/Pages/Index.razor.cs

@@ -2,6 +2,7 @@
 // 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 Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
 using Microsoft.Extensions.Options;
@@ -18,12 +19,15 @@ namespace BootstrapBlazor.Shared.Pages
     {
         private ElementReference TypeElement { get; set; }
 
+        private string? BodyClassString => CssBuilder.Default(Localizer["BodyClassString"])
+            .Build();
+
         [Inject]
         private IJSRuntime? JSRuntime { get; set; }
 
         [Inject]
         [NotNull]
-        private IStringLocalizer<App>? Localizer { get; set; }
+        private IStringLocalizer<Index>? Localizer { get; set; }
 
         [Inject]
         [NotNull]
@@ -40,7 +44,7 @@ namespace BootstrapBlazor.Shared.Pages
 
             if (firstRender && JSRuntime != null)
             {
-                await JSRuntime.InvokeVoidAsync("$.indexTyper", TypeElement);
+                await JSRuntime.InvokeVoidAsync("$.indexTyper", TypeElement, Localizer["DynamicText"].Value.ToCharArray(), Localizer["DynamicText1"].Value.ToCharArray(), Localizer["DynamicText2"].Value.ToCharArray());
             }
         }
     }

src/BootstrapBlazor.Shared/Pages/Install.razor

@@ -1,11 +1,12 @@
 @page "/install"
 @inject NugetVersionService VersionManager
+@inject IStringLocalizer<Install> Localizer
 
-<h3>安装</h3>
+<h3>@Localizer["InstallTitle"]</h3>
 
 <h4>Git</h4>
 
-<p>Git 工具有很多种大家比较熟悉的，这里我介绍两款 Git 客户端工具</p>
+<p>@Localizer["GitP1"]</p>
 
 <div class="row mb-sm-3">
     <div class="git col-12 col-sm-6 mb-3 mb-sm-0">
@@ -19,11 +20,11 @@
     </div>
 </div>
 
-<p>推荐使用 <a href="https://fork.dev">Fork</a> 工具进行安装，它能更好地和 <a href="https://visualstudio.microsoft.com/vs/getting-started/" target="_blank">Visutal Studio</a> 开发工具配合使用。</p>
+<p>@((MarkupString)Localizer["GitP2"].Value)</p>
 
-<h4>Nuget 包安装</h4>
+<h4>@Localizer["NugetInstall"]</h4>
 
-<p>使用 <a href="https://www.nuget.org/packages?q=BootstrapBlazor" target="_blank">nuget.org</a> 进行 BootstrapBlazor 组件的安装</p>
+<p>@((MarkupString)Localizer["NugetP1"].Value)</p>
 
 <div class="code-label">.NET CLI</div>
 <Pre class="no-highlight">dotnet add package BootstrapBlazor --version @Version</Pre>
@@ -34,12 +35,12 @@
 <div class="code-label">Package Manager</div>
 <Pre class="no-highlight">Install-Package BootstrapBlazor -Version @Version</Pre>
 
-<h4>项目环境搭建</h4>
+<h4>@Localizer["EnvBuildTitle"]</h4>
 
 <ol>
-    <li>安装 .net core sdk <a href="http://www.microsoft.com/net/download" target="_blank">官方网址</a></li>
-    <li>安装 Visual Studio 2019 以上 <a href="https://visualstudio.microsoft.com/vs/getting-started" target="_blank">官方网址</a></li>
-    <li>拉取项目代码 BootstrapBlazor <a href="https://gitee.com/LongbowEnterprise/BootstrapBlazor" target="_blank">仓库网址</a></li>
+    <li>@((MarkupString)Localizer["EnvLi1"].Value)</li>
+    <li>@((MarkupString)Localizer["EnvLi2"].Value)</li>
+    <li>@((MarkupString)Localizer["EnvLi3"].Value)</li>
 </ol>
 
 <Pre class="no-highlight">git clone https://gitee.com/LongbowEnterprise/BootstrapBlazor</Pre>

src/BootstrapBlazor.Shared/Pages/Install_Server.razor

@@ -1,12 +1,13 @@
 @page "/install-server"
+@inject IStringLocalizer<Install_Server> Localizer
 
-<InstallContent>
+<InstallContent Title="@Localizer["Title"]">
 <Pre>public void ConfigureServices(IServiceCollection services)
 {
     services.AddRazorPages();
     services.AddServerSideBlazor();
 
-    // 添加本行代码
+    // @Localizer["CodeComment"]
     services.AddBootstrapBlazor(); 
 }</Pre>
 </InstallContent>

src/BootstrapBlazor.Shared/Pages/Install_wasm.razor

@@ -1,6 +1,7 @@
 @page "/install-wasm"
+@inject IStringLocalizer<Install_wasm> Localizer
 
-<InstallContent Title="客户端渲染模式" HostFile="wwwroot/index.html">
+<InstallContent Title="@Localizer["Title"]" HostFile="wwwroot/index.html">
 <Pre>public class Program
 {
     public static async Task Main(string[] args)
@@ -9,7 +10,7 @@
         builder.RootComponents.Add&lt;App&gt;("app");
         builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
-        // 添加本行代码
+        // @Localizer["CodeComment"]
         builder.Services.AddBootstrapBlazor();
 
         await builder.Build().RunAsync();

src/BootstrapBlazor.Shared/Pages/Introduction.razor

@@ -1,47 +1,70 @@
 @page "/docs"
 @page "/introduction"
-@inject IOptions<WebsiteOptions> WebsiteOption
 
-<h3>简介</h3>
+<h3>@Localizer["Title"]</h3>
 
-<p>BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。</p>
+<p>@Localizer["P1"]</p>
 
-<p>由于 Bootstrap UI 框架目前版本对 jQuery 有依赖，所以我们的 BootstrapBlazor 对 jQuery 也是有依赖</p>
+<p>@Localizer["P2"]</p>
 
-<p>依赖关系为：BootstrapBlazor > Bootstrap > jQuery</p>
+<p>@((MarkupString)Localizer["P3"].Value)</p>
 
-<p>最新 <a href="template" target="_blank">项目模板</a> 中将以上依赖进行了打包捆绑大大简化使用</p>
+<h3>@Localizer["UpdateTitle"]</h3>
 
-<h3>学习资料</h3>
+<p>@((MarkupString)Localizer["P4", WebsiteOption.Value.WikiUrl].Value)</p>
+
+<h3>@Localizer["LearnTitle"]</h3>
 
 <ul class="ul-demo mt-3">
-    <li><a href="https://docs.microsoft.com/zh-cn/aspnet/core/blazor/?WT.mc_id=DT-MVP-5004174" target="_blank">Blazor 官方文档</a></li>
-    <li><a href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/?WT.mc_id=DT-MVP-5004174" target="_blank">使用 Blazor WebAssembly 和 Visual Studio Code 生成 Web 应用</a></li>
+    <li><a href="https://docs.microsoft.com/zh-cn/aspnet/core/blazor/?WT.mc_id=DT-MVP-5004174" target="_blank">@Localizer["LearnLi1"]</a></li>
+    <li><a href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/?WT.mc_id=DT-MVP-5004174" target="_blank">@Localizer["LearnLi2"]</a></li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/2-understand-blazor-webassembly?WT.mc_id=DT-MVP-5004174">@Localizer["LearnLi3"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/3-exercise-configure-enviromnent?WT.mc_id=DT-MVP-5004174">@Localizer["LearnLi4"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/4-blazor-components?WT.mc_id=DT-MVP-5004174">@Localizer["LearnLi5"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/5-exercise-add-component?WT.mc_id=DT-MVP-5004174">@Localizer["Learn6"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/6-csharp-razor-binding?WT.mc_id=DT-MVP-5004174">@Localizer["LeanrnLi7"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/7-exercise-razor-binding?WT.mc_id=DT-MVP-5004174">@Localizer["LearnLi8"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/8-summary?WT.mc_id=DT-MVP-5004174">@Localizer["Summarize"]</a>
+    </li>
 </ul>
 
-<h3>作品展示</h3>
+<h3>@Localizer["ProjectsShow"]</h3>
 
-<p>国内最大代码托管协作开发平台 <b><a href="@WebsiteOption.Value.BootstrapBlazorLink" target="_blank">码云</a></b> C# 板块最高星 <a href='@WebsiteOption.Value.BootstrapAdminLink/stargazers'><img src='@WebsiteOption.Value.BootstrapAdminLink/badge/star.svg?theme=gvp' alt='star' style="margin-bottom: 1px;" /></a> 作品 <b><a href="@WebsiteOption.Value.BootstrapAdminLink" target="_blank">通用后台管理系统 BootstrapAdmin</a></b> 准备使用本组件实现全部功能</p>
+<p>@((MarkupString)Localizer["P5", LocalizerUrls].Value)</p>
 
-<p>演示网站：<a href="@($"{WebsiteOption.Value.AdminUrl}/Pages")" target="_blank">@WebsiteOption.Value.AdminUrl</a></p>
+<p>@Localizer["ShowWebSiteTitle"]：<a href="@($"{WebsiteOption.Value.AdminUrl}/Pages")" target="_blank">@WebsiteOption.Value.AdminUrl</a></p>
 
-<h4>快速上手</h4>
+<h4>@Localizer["GetStarted"]</h4>
 
-<p><a href="https://v4.bootcss.com/docs/getting-started/introduction/" target="_blank">Bootstrap 快速入门</a></p>
+<p><a href="https://v5.bootcss.com/docs/getting-started/introduction/" target="_blank">Bootstrap @Localizer["QuikStart"]</a></p>
 
-<h4>组件特色</h4>
+<h4>@Localizer["Features"]</h4>
 
-<p>Bootstrap Blazor UI 组件库提供了从基本的 <code>Button</code> 组件到高级的网页级 <code>SmartPage</code> 组件</p>
+<p>@((MarkupString)Localizer["P6"].Value)</p>
 
-<p class="code-label">优势</p>
+<p class="code-label">@Localizer["Advantage"]</p>
 
 <ul>
-    <li>使用组件无需编写 <code>Javascript</code></li>
-    <li>组件支持所有 <code>html</code> 特性</li>
-    <li>组件支持数据双向绑定</li>
-    <li>组件支持自动客户端验证</li>
-    <li>组件支持组合</li>
+    <li>@((MarkupString)Localizer["AdvantageLi1"].Value)</li>
+    <li>@((MarkupString)Localizer["AdvantageLi2"].Value)</li>
+    <li>@Localizer["AdvantageLi3"]</li>
+    <li>@Localizer["AdvantageLi4"]</li>
+    <li>@Localizer["AdvantageLi5"]</li>
 </ul>
 
-<p class="code-label">交流群</p>
+<p class="code-label">@Localizer["Community"]</p>
+
 <QQGroup />

src/BootstrapBlazor.Shared/Pages/Introduction.razor.cs

@@ -0,0 +1,88 @@
+// 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 Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+using Microsoft.Extensions.Options;
+using Microsoft.JSInterop;
+using System;
+using System.Diagnostics.CodeAnalysis;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class Introduction : IAsyncDisposable
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        [Inject]
+        [NotNull]
+        private IOptions<WebsiteOptions>? WebsiteOption { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Inject]
+        [NotNull]
+        private IStringLocalizer<Introduction>? Localizer { get; set; }
+
+        [Inject]
+        [NotNull]
+        private IJSRuntime? JSRuntime { get; set; }
+
+        [NotNull]
+        private string[]? LocalizerUrls { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            LocalizerUrls = new string[]
+            {
+                WebsiteOption.Value.BootstrapBlazorLink,
+                WebsiteOption.Value.BootstrapBlazorLink + "/stargazers",
+                WebsiteOption.Value.BootstrapBlazorLink + "/badge/star.svg?theme=gvp",
+                WebsiteOption.Value.BootstrapAdminLink
+            };
+        }
+
+        private bool IsRender { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        /// <returns></returns>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);
+
+            if (firstRender)
+            {
+                IsRender = true;
+                await JSRuntime.InvokeVoidAsync("$.bb_open");
+            }
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
+        public async ValueTask DisposeAsync()
+        {
+            if (IsRender)
+            {
+                await JSRuntime.InvokeVoidAsync("$.bb_open", "dispose");
+            }
+            GC.SuppressFinalize(this);
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Samples/Alerts.razor

@@ -15,15 +15,13 @@
 </Block>
 
 <Block Title="@CloseButtonUsageText" Introduction="@IntroText2">
-    <div>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Primary">@AlertPrimaryText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Secondary">@AlertSecondaryText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Success">@AlertSuccessText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Danger">@AlertDangerText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Warning">@AlertWarningText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Info">@AlertInfoText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Dark">@AlertDarkText</Alert>
-    </div>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Primary">@AlertPrimaryText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Secondary">@AlertSecondaryText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Success">@AlertSuccessText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Danger">@AlertDangerText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Warning">@AlertWarningText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Info">@AlertInfoText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Dark">@AlertDarkText</Alert>
     <Logger @ref="Trace" class="mt-3" />
 </Block>
 

src/BootstrapBlazor.Shared/Pages/Samples/Anchors.razor.cs

@@ -48,8 +48,8 @@ namespace BootstrapBlazor.Shared.Pages
             SubTitle ??= Localizer[nameof(SubTitle)];
             BaseUsageText ??= Localizer[nameof(BaseUsageText)];
             IntroText1 ??= Localizer[nameof(IntroText1)];
-            IntroText2 = new MarkupString(Localizer[nameof(IntroText2)] ?? "");
-            ContentText1 = new MarkupString(Localizer[nameof(ContentText1)] ?? "");
+            IntroText2 = new MarkupString(Localizer[nameof(IntroText2)]?.Value ?? "");
+            ContentText1 = new MarkupString(Localizer[nameof(ContentText1)]?.Value ?? "");
         }
 
 
@@ -57,7 +57,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// 获得属性方法
         /// </summary>
         /// <returns></returns>
-        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        private static IEnumerable<AttributeItem> GetAttributes() => new[]
         {
             // TODO: 移动到数据库中
             new AttributeItem() {

src/BootstrapBlazor.Shared/Pages/Samples/AutoCompletes.razor

@@ -35,29 +35,13 @@
 <Block Title="显示标签" Introduction="组件双向绑定时会根据条件自动判断是否显示标签文字">
     <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
     <Divider Text="双向绑定显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
-    <ValidateForm class="form-inline" Model="@Model">
-        <div class="row">
-            <div class="form-group col-12">
-                <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" />
-            </div>
-        </div>
+    <ValidateForm Model="@Model">
+        <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" />
     </ValidateForm>
     <Divider Text="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="false" />
-            </div>
-        </div>
-    </div>
+    <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="false" />
     <Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" DisplayText="自定义城市" ShowLabel="true" />
-            </div>
-        </div>
-    </div>
+    <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" DisplayText="自定义城市" ShowLabel="true" />
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/AutoCompletes.razor.cs

@@ -67,6 +67,13 @@ namespace BootstrapBlazor.Shared.Pages
                 ValueList = " — ",
                 DefaultValue = "无匹配数据"
             },
+            new AttributeItem() {
+                Name = "DisplayCount",
+                Description = "匹配数据时显示的数量",
+                Type = "int?",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
             new AttributeItem() {
                 Name = "ValueChanged",
                 Description = "文本框值变化时回调委托方法",
@@ -89,6 +96,14 @@ namespace BootstrapBlazor.Shared.Pages
                 ValueList = "true|false",
                 DefaultValue = "true"
             },
+            new AttributeItem()
+            {
+                Name = "CustomFilter",
+                Description = "自定义集合过滤规则",
+                Type = "Func<Task<IEnumerable<string>>>",
+                ValueList = " — ",
+                DefaultValue = " — "
+            }
         };
     }
 }

src/BootstrapBlazor.Shared/Pages/Samples/Badges.razor

@@ -5,53 +5,47 @@
 <h4>出现在按钮、图标旁的数字或状态标记</h4>
 
 <Block Title="基础用法" Introduction="提供各种颜色的徽章小挂件组件">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Primary">primary</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Secondary">secondary</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Success">success</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Danger">danger</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Warning">warning</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Info">info</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Dark">dark</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Light">light</Badge></div>
+        <div class="row g-3">
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Primary">primary</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Secondary">secondary</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Success">success</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Danger">danger</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Warning">warning</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Info">info</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Dark">dark</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Light">light</Badge></div>
         </div>
-    </div>
 </Block>
 
 <Block Title="胶囊徽章" Introduction='通过属性 <code>IsPill="true"</code> 设置圆角的徽章挂件'>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Primary">primary</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Secondary">secondary</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Success">success</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Danger">danger</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Warning">warning</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Info">info</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Dark">dark</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Light">light</Badge></div>
+        <div class="row g-3">
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Primary">primary</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Secondary">secondary</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Success">success</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Danger">danger</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Warning">warning</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Info">info</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Dark">dark</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Light">light</Badge></div>
         </div>
-    </div>
 </Block>
 
 <Block Title="按钮内徽章" Introduction="按钮内部徽章">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
+        <div class="row g-3">
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
                 <Button Color="Color.Primary">
                     <i class="fa fa-tv"></i>
                     <span>主要按钮</span>
                     <Badge Color="Color.Danger">1</Badge>
                 </Button>
             </div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
                 <div class="badge-widget">
                     <i class="fa fa-tv"></i>
                     <Badge Color="Color.Success"><span style="padding: 0 2px;">8</span></Badge>
                 </div>
             </div>
         </div>
-    </div>
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor

@@ -5,91 +5,81 @@
 <h4>常用的操作按钮。</h4>
 
 <Block Title="基础用法" Introduction="基础的按钮用法。">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Primary">主要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Secondary">次要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Success">成功按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Danger">危险按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Warning">警告按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Info">信息按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Dark">黑暗按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Light">高亮按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Link">链接按钮</Button></div>
-        </div>
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Primary">主要按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Secondary">次要按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Success">成功按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Danger">危险按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Warning">警告按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Info">信息按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Dark">黑暗按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Light">高亮按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Link">链接按钮</Button></div>
     </div>
     <Logger @ref="Trace" class="mt-3" />
 </Block>
 
 <Block Title="不同风格" Introduction="通过设置 <code>ButtonStyle</code> 来显示不同的按钮风格">
-    <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 class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">主要按钮</Button>
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Secondary">次要按钮</Button>
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Success">成功按钮</Button>
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Danger">危险按钮</Button>
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Warning">警告按钮</Button>
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Circle" Icon="fa fa-fw fa-cubes">
+            </Button>
         </div>
     </div>
 </Block>
 
 <Block Title="Outline 按钮" Introduction='通过设置 <code>IsOutline="true"</code> 设置按钮边框颜色样式。'>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Primary">主要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary">次要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Success">成功按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Danger">危险按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Warning">警告按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Info">信息按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Dark">黑暗按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Light">高亮按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Link">链接按钮</Button></div>
-        </div>
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Primary">主要按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary">次要按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Success">成功按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Danger">危险按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Warning">警告按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Info">信息按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Dark">黑暗按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Light">高亮按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Link">链接按钮</Button></div>
     </div>
 </Block>
 
 <Block Title="不同尺寸" Introduction='Button 组件提供除了默认值以外的多种尺寸，通过设置 <code>Size</code> 属性可以在不同场景下选择合适的按钮尺寸。'>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraSmall" Color="Color.Primary">超小按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Small" Color="Color.Secondary">小按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.None" Color="Color.Info">按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Medium" Color="Color.Success">中等按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Large" Color="Color.Danger">大按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraLarge" Color="Color.Warning">超大按钮</Button></div>
-            <div class="form-group col-12"><Button IsBlock="true" Color="Color.Primary">Block 按钮</Button></div>
-        </div>
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraSmall" Color="Color.Primary">超小按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Small" Color="Color.Secondary">小按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.None" Color="Color.Info">按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Medium" Color="Color.Success">中等按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Large" Color="Color.Danger">大按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraLarge" Color="Color.Warning">超大按钮</Button></div>
+        <div class="col-12"><Button IsBlock="true" Color="Color.Primary">Block 按钮</Button></div>
     </div>
 </Block>
 
 <Block Title="禁用状态" Introduction="按钮不可用状态。通过设置 <code>IsDisabled</code> 属性">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Primary">主要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Secondary">次要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Success">成功按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Danger">危险按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Warning">警告按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Info">信息按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Dark">黑暗按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Light">高亮按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Link">链接按钮</Button></div>
-        </div>
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Primary">主要按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Secondary">次要按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Success">成功按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Danger">危险按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Warning">警告按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Info">信息按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Dark">黑暗按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Light">高亮按钮</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Link">链接按钮</Button></div>
     </div>
 
     <p class="mt-3">通过 <code>OnClick</code> 回调方法中设置自身 <code>IsDisabled</code> 属性，或者调用组件实例方法 <code>SetDisable</code> 均可实现按钮禁用效果</p>
@@ -100,67 +90,51 @@
         <li>使用 <code>IsDisabled</code> 属性设置时本页面传输量为 <code>4.8K</code></li>
         <li>使用 <code>SetDisable</code> 方法设置时本页面传输量为 <code>280B</code></li>
     </ul>
-    <div class="form-inline">
-        <div class="form-row">
-            <div class="form-group col-12">
-                <Button Text="点击被禁用" OnClick="@ClickButton1" @ref="ButtonDisableDemo" IsDisabled="@IsDisable">
-                    <Tooltip Title="点击按钮后由于被禁用 Tooltip 被销毁" Placement="Placement.Top" Trigger="hover" />
-                </Button>
-                <Button Color="Color.Info" Text="点击后使第一个按钮可用" OnClickWithoutRender="@ClickButton2" class="ml-3"></Button>
-            </div>
+    <div class="row g-3">
+        <div class="col-12">
+            <Button Text="点击被禁用" OnClick="@ClickButton1" @ref="ButtonDisableDemo" IsDisabled="@IsDisable">
+                <Tooltip Title="点击按钮后由于被禁用 Tooltip 被销毁" Placement="Placement.Top" Trigger="hover" />
+            </Button>
+            <Button Color="Color.Info" Text="点击后使第一个按钮可用" OnClickWithoutRender="@ClickButton2" class="ms-3"></Button>
         </div>
     </div>
 </Block>
 
 <Block Title="按钮组" Introduction="由多个按钮组成一个组合按钮">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-auto">
-                <div class="btn-group" role="group">
-                    <Button Color="Color.Primary">按钮一</Button>
-                    <Button Color="Color.Success">按钮二</Button>
-                </div>
-            </div>
-        </div>
+    <div class="btn-group" role="group">
+        <Button Color="Color.Primary">按钮一</Button>
+        <Button Color="Color.Success">按钮二</Button>
     </div>
 </Block>
 
 <Block Title="带图标的按钮" Introduction="通过设置 <code>Icon</code> 属性对按钮图标进行设置，图标为字体字符串如使用 <code>font-awesome</code> 图标时 <code>fa fa-fa</code>">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-auto">
-                <Button Color="Color.Primary" Icon="fa fa-fa" Text="状态按钮"></Button>
-            </div>
-            <div class="form-group col-auto">
-                <Button Color="Color.Info" Icon="fa fa-spinner fa-spin fa-fw" Text="进度按钮"></Button>
-            </div>
+    <div class="row g-3">
+        <div class="col-auto">
+            <Button Color="Color.Primary" Icon="fa fa-fa" Text="状态按钮"></Button>
+        </div>
+        <div class="col-auto">
+            <Button Color="Color.Info" Icon="fa fa-spinner fa-spin fa-fw" Text="进度按钮"></Button>
         </div>
     </div>
 </Block>
 
 <Block Title="二次封装按钮" Introduction="通过设置 <code>WinButton</code> 组件的 <code>Text</code> 属性对按钮显示文字进行设置，点击按钮是右侧显示被点击按钮的文字">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-auto">
-                <WinButton Text="按钮一" OnClick="@ClickButtonShowText"></WinButton>
-            </div>
-            <div class="form-group col-auto">
-                <WinButton Text="按钮二" OnClick="@ClickButtonShowText"></WinButton>
-            </div>
-            <div class="form-group col-auto">
-                @ButtonText
-            </div>
+    <div class="row g-3">
+        <div class="col-auto">
+            <WinButton Text="按钮一" OnClick="@ClickButtonShowText"></WinButton>
+        </div>
+        <div class="col-auto">
+            <WinButton Text="按钮二" OnClick="@ClickButtonShowText"></WinButton>
+        </div>
+        <div class="col-auto">
+            @ButtonText
         </div>
     </div>
 </Block>
 
 <Block Title="异步请求按钮" Introduction="通过设置 <code>IsAsync</code> 属性按钮是否为 <b>异步请求按钮</b>，默认为 <code>false</code>">
     <p>当按钮为异步请求按钮时，点击按钮后自身状态会改变为禁用状态，同时显示 <code>Loading</code> 小图标，异步请求结束后恢复正常，本例中点击 <b>异步请求</b>按钮后，显示请求加载动画，5 秒后恢复正常</p>
-    <div class="row">
-        <div class="col">
-            <Button Text="异步请求" IsAsync="true" Icon="fa fa-fw fa-fa" OnClick="@ClickAsyncButton" />
-        </div>
-    </div>
+    <Button Text="异步请求" IsAsync="true" Icon="fa fa-fw fa-fa" OnClick="@ClickAsyncButton" />
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/Calendars.razor

@@ -11,7 +11,7 @@
 
 <Block Title="数据双向绑定" Introduction="日历框选择时间时数据自动更新文本框">
     <Calendar @bind-Value="@BindValue" />
-    <BootstrapInput TItem="DateTime" @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />
+    <BootstrapInput @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />
 </Block>
 
 <Block Title="按周展示" Introduction="通过设置属性 <code></code>">

src/BootstrapBlazor.Shared/Pages/Samples/Cards.razor

@@ -5,7 +5,7 @@
 <h4>将信息聚合在卡片容器中展示</h4>
 
 <Block Title="Card 卡片组件" Introduction="Card简单示例">
-    <Card style="width: 18rem;">
+    <Card>
         <CardBody>
             <h5 class="card-title">Card title</h5>
             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -47,70 +47,84 @@
 </Block>
 
 <Block Title="带有边框颜色的卡片" Introduction="通过设置，<code>Color</code> 使border和Body具有相应的颜色">
-    <div class="row flex">
-        <Card Color="Color.Primary" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Primary card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Secondary" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Success card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Success" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Secondary card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Warning" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Warning card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Danger" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Danger card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Info" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Info card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Dark" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Dark card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Primary" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Primary card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Secondary" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Success card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Success" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Secondary card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Warning" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Warning card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Danger" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Danger card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Info" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Info card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Dark" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Dark card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
     </div>
 </Block>
 

src/BootstrapBlazor.Shared/Pages/Samples/Carousels.razor

@@ -5,33 +5,15 @@
 <h4>在有限空间内，循环播放同一类型的图片、文字等内容</h4>
 
 <Block Title="基础用法" Introduction="适用广泛的基础用法，通过设置 <code>Items</code> 属性值对组件进行图片的绑定，值为图片路径数组">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <Carousel Images="@Images" Width="280"></Carousel>
-            </div>
-        </div>
-    </div>
+    <Carousel Images="@Images" Width="280"></Carousel>
 </Block>
 
 <Block Title="淡入淡出" Introduction="通过设置 <code>IsFade</code> 属性，图片切换时采用淡入淡出效果">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <Carousel Images="@Images" Width="280" IsFade="true"></Carousel>
-            </div>
-        </div>
-    </div>
+    <Carousel Images="@Images" Width="280" IsFade="true"></Carousel>
 </Block>
 
 <Block Title="点击图片回调事件" Introduction="通过设置 <code>OnClick</code> 属性后，点击 <code>Image</code> 后触发 <code>OnClick</code> 回调委托">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <Carousel Images="@Images" Width="280" IsFade="true" OnClick="@OnClick"></Carousel>
-            </div>
-        </div>
-    </div>
+    <Carousel Images="@Images" Width="280" IsFade="true" OnClick="@OnClick"></Carousel>
     <Logger @ref="Trace" class="mt-3" />
 </Block>
 

src/BootstrapBlazor.Shared/Pages/Samples/Cascaders.razor

@@ -2,85 +2,79 @@
 <h3>Cascader 级联选择</h3>
 
 <Block Title="Cascader 级联选择" Introduction="提供各种颜色的下拉选择框">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Primary" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Success" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Danger" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Warning" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Info" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Secondary" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Dark" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
-            </div>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Primary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Success" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Danger" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Warning" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Info" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Secondary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Dark" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
         </div>
     </div>
     <Logger @ref="Trace" class="mt-3" />
 </Block>
 
 <Block Title="Cascader 禁用级联选择" Introduction="级联选择不可用状态">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Primary" Items="@Items" IsDisabled="true"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Success" Items="@Items" IsDisabled="true"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Danger" Items="@Items" IsDisabled="true"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Warning" Items="@Items" IsDisabled="true"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Info" Items="@Items" IsDisabled="true"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Secondary" Items="@Items" IsDisabled="true"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Cascader TValue="string" Color="Color.Dark" Items="@Items" IsDisabled="true"></Cascader>
-            </div>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Primary" Items="@Items" IsDisabled="true"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Success" Items="@Items" IsDisabled="true"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Danger" Items="@Items" IsDisabled="true"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Warning" Items="@Items" IsDisabled="true"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Info" Items="@Items" IsDisabled="true"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Secondary" Items="@Items" IsDisabled="true"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Cascader TValue="string" Color="Color.Dark" Items="@Items" IsDisabled="true"></Cascader>
         </div>
     </div>
 </Block>
 
 <Block Title="Cascader 双向绑定" Introduction="通过 <code>Select</code> 组件绑定 <code>Value</code> 属性，改变级联选择选项时，文本框内的数值随之改变。">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-sm-6">
-                <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Value"></Cascader>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <BootstrapInput readonly @bind-Value="@Value" />
-            </div>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
+            <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Value"></Cascader>
+        </div>
+        <div class="col-12 col-sm-6">
+            <BootstrapInput readonly @bind-Value="@Value" />
         </div>
     </div>
 </Block>
 
-<Block Title="Select 客户端验证" Introduction="级联选择未选择时，点击提交按钮时拦截。">
-    <ValidateForm class="form-inline" Model="@Model">
-        <div class="row">
-            <div class="form-group col-12 col-sm-6">
+<Block Title="Cascader 客户端验证" Introduction="级联选择未选择时，点击提交按钮时拦截。">
+    <ValidateForm Model="@Model">
+        <div class="row g-3">
+            <div class="col-12 col-sm-6">
                 <Cascader Items="@Items" @bind-Value="@Model.Address"></Cascader>
             </div>
-            <div class="form-group col-12 col-sm-6 align-items-end">
+            <div class="col-12 col-sm-6 align-items-end">
                 <Button ButtonType="ButtonType.Submit">提交</Button>
             </div>
         </div>
@@ -88,11 +82,11 @@
 </Block>
 
 <Block Title="绑定泛型为 Guid 结构" Introduction="组件绑定值为 Guid 结构体示例">
-    <div class="row">
-        <div class="form-group col-12 col-sm-3">
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
             <Cascader Color="Color.Primary" Items="@GuidItems" @bind-Value="@CurrentGuid" />
         </div>
-        <div class="form-group col-12 col-sm-9">
+        <div class="col-12 col-sm-6">
             <div class="form-control">@CurrentGuid</div>
         </div>
     </div>
@@ -101,31 +95,15 @@
 <Block Title="显示标签" Introduction="组件双向绑定时会根据条件自动判断是否显示标签文字">
     <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
     <Divider Text="双向绑定显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
-    <ValidateForm class="form-inline" Model="@Model">
-        <div class="row">
-            <div class="form-group col-12">
-                <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" />
-            </div>
-        </div>
+    <ValidateForm Model="@Model">
+        <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" />
     </ValidateForm>
     <Divider Text="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" />
-            </div>
-        </div>
-    </div>
+    <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" />
     <Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" DisplayText="自定义城市" ShowLabel="true" />
-            </div>
-        </div>
-    </div>
+    <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" DisplayText="自定义城市" ShowLabel="true" />
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />
 
-<EventTable Items="@GetEvents()" />
+<EventTable Items="@GetEvents()" />

src/BootstrapBlazor.Shared/Pages/Samples/Cascaders.razor.cs

@@ -84,7 +84,7 @@ namespace BootstrapBlazor.Shared.Pages
         {
             new EventItem()
             {
-                Name = "OnValueChanged",
+                Name = nameof(Cascader<string>.OnSelectedItemChanged),
                 Description="级联选择选项改变时触发此事件",
                 Type ="Func<CascaderItem[], Task>"
             }
@@ -148,4 +148,4 @@ namespace BootstrapBlazor.Shared.Pages
             }
         };
     }
-}
+}

src/BootstrapBlazor.Shared/Pages/Samples/Charts.razor

@@ -1,152 +0,0 @@
-@page "/charts"
-@using Microsoft.Extensions.DependencyInjection
-@implements IDisposable
-@inherits ComponentBase
-@inject NugetVersionService VersionManager
-
-<h3>Chart 图表</h3>
-
-<h4>通过给定数据，绘画各种图表的组件</h4>
-
-<p>本组件依赖于 <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Chart" target="_blank"><code>BootstrapBlazor.Chart</code></a>，使用本组件时需要引用其组件包</p>
-
-<p><b>Nuget 包安装</b></p>
-
-<p>使用 <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Chart" target="_blank">nuget.org</a> 进行 <code>BootstrapBlazor.Chart</code> 组件的安装</p>
-
-<div class="code-label">.NET CLI</div>
-<Pre class="no-highlight">dotnet add package BootstrapBlazor.Chart --version @Version</Pre>
-
-<div class="code-label">PackageReference</div>
-<Pre class="no-highlight">&lt;PackageReference Include="BootstrapBlazor.Chart" Version="@Version" /&gt;</Pre>
-
-<div class="code-label">Package Manager</div>
-<Pre class="no-highlight">Install-Package BootstrapBlazor.Chart -Version @Version</Pre>
-
-<h4>CSS 文件</h4>
-
-<Pre>&lt;link rel="stylesheet" href="_content/BootstrapBlazor.Chart/css/bootstrap.blazor.chart.bundle.min.css" /&gt;</Pre>
-
-<h4>JS 文件</h4>
-
-<Pre>&lt;script src="_content/BootstrapBlazor.Chart/js/bootstrap.blazor.chart.bundle.min.js"&gt;&lt;/script&gt;</Pre>
-
-<p>组件数据在 <code>OnInit</code> 回调委托中进行设置即可</p>
-
-<Block Title="Line 图" Introduction="使用 <code>OnInit</code> 回调委托方法，对初始化数据进行赋值后，即可进行绘图操作">
-    <Chart OnInit="@(() => OnInit(LineDatasetCount, LineDataCount))" @ref="LineChart" />
-    <div class="text-center mt-2 chart">
-        <div class="btn-group">
-            <button class="btn btn-primary" @onclick="e => RandomData(LineChart)"><i class="fa fa-line-chart"></i><span>随机数据</span></button>
-            <button class="btn btn-primary" @onclick="e => AddDataSet(LineChart, ref LineDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
-            <button class="btn btn-primary" @onclick="e => RemoveDataSet(LineChart, ref LineDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
-            <button class="btn btn-primary" @onclick="e => AddData(LineChart, ref LineDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
-            <button class="btn btn-primary" @onclick="e => RemoveData(LineChart, ref LineDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
-        </div>
-    </div>
-</Block>
-
-<Block Title="Bar 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>bar</code> 图">
-    <Chart ChartType="ChartType.Bar" OnInit="@(() => OnInit(BarDatasetCount, BarDataCount))" @ref="BarChart" />
-    <div class="text-center mt-2 chart">
-        <div class="btn-group">
-            <button class="btn btn-info" data-method="play" @onclick="@OnPlayChart">
-                <i class="fa fa-play-circle"></i>
-                <span>开启动画</span>
-            </button>
-            <button class="btn btn-info" data-method="stop" @onclick="@OnStopChart">
-                <i class="fa fa-stop-circle"></i>
-                <span>关闭动画</span>
-            </button>
-        </div>
-    </div>
-    <div class="text-center mt-2 chart">
-        <div class="btn-group">
-            <button class="btn btn-primary" @onclick="e => RandomData(BarChart)"><i class="fa fa-bar-chart"></i><span>随机数据</span></button>
-            <button class="btn btn-primary" @onclick="e => AddDataSet(BarChart, ref BarDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
-            <button class="btn btn-primary" @onclick="e => RemoveDataSet(BarChart, ref BarDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
-            <button class="btn btn-primary" @onclick="e => AddData(BarChart, ref BarDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
-            <button class="btn btn-primary" @onclick="e => RemoveData(BarChart, ref BarDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
-        </div>
-    </div>
-</Block>
-
-<Block Title="Pie 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>pie</code> 图">
-    <Chart ChartType="ChartType.Pie" OnInit="@(() => OnPieInit(PieDatasetCount, PieDataCount))" @ref="PieChart" />
-    <div class="text-center mt-2 chart">
-        <div class="btn-group">
-            <button class="btn btn-primary" @onclick="e => RandomData(PieChart)"><i class="fa fa-pie-chart"></i><span>随机数据</span></button>
-            <button class="btn btn-primary" @onclick="e => AddDataSet(PieChart, ref PieDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
-            <button class="btn btn-primary" @onclick="e => RemoveDataSet(PieChart, ref PieDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
-            <button class="btn btn-primary" @onclick="e => AddData(PieChart, ref PieDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
-            <button class="btn btn-primary" @onclick="e => RemoveData(PieChart, ref PieDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
-        </div>
-    </div>
-</Block>
-
-<Block Title="Doughnut 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>doughnut</code> 图">
-    <Chart ChartType="ChartType.Doughnut" OnInit="@(() => OnPieInit(DoughnutDatasetCount, DoughnutDataCount))" @ref="DoughnutChart" />
-    <div class="text-center mt-2 chart">
-        <div class="btn-group">
-            <button class="btn btn-primary" @onclick="e => RandomData(DoughnutChart)"><i class="fa fa-slack"></i><span>随机数据</span></button>
-            <button class="btn btn-primary" @onclick="e => AddDataSet(DoughnutChart, ref DoughnutDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
-            <button class="btn btn-primary" @onclick="e => RemoveDataSet(DoughnutChart, ref DoughnutDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
-            <button class="btn btn-primary" @onclick="e => AddData(DoughnutChart, ref DoughnutDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
-            <button class="btn btn-primary" @onclick="e => RemoveData(DoughnutChart, ref DoughnutDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
-            <button class="btn btn-primary" @onclick="@ToggleCircle"><i class="fa fa-circle-o-notch"></i><span>半圆/全圆</span></button>
-        </div>
-    </div>
-</Block>
-
-<Block Title="Bubble 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>bubble</code> 图">
-    <Chart ChartType="ChartType.Bubble" OnInit="@(() => OnBubbleInit(BubbleDatasetCount, BubbleDataCount))" @ref="BubbleChart" />
-    <div class="text-center mt-2 chart">
-        <div class="btn-group">
-            <button class="btn btn-primary" @onclick="e => RandomData(BubbleChart)"><i class="fa fa-snowflake-o"></i><span>随机数据</span></button>
-            <button class="btn btn-primary" @onclick="e => AddDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
-            <button class="btn btn-primary" @onclick="e => RemoveDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
-            <button class="btn btn-primary" @onclick="e => AddData(BubbleChart, ref BubbleDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
-            <button class="btn btn-primary" @onclick="e => RemoveData(BubbleChart, ref BubbleDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
-        </div>
-    </div>
-</Block>
-
-<AttributeTable Items="@GetAttributes()" />
-
-<EventTable Items="@GetEvents()" />
-
-@code {
-    private int LineDatasetCount = 2;
-
-    private int BarDatasetCount = 2;
-
-    private int PieDatasetCount = 1;
-
-    private int DoughnutDatasetCount = 1;
-
-    private int BubbleDatasetCount = 2;
-
-    private int LineDataCount = 7;
-
-    private int BarDataCount = 7;
-
-    private int PieDataCount = 5;
-
-    private int DoughnutDataCount = 5;
-
-    private int BubbleDataCount = 7;
-
-    /// <summary>
-    /// 获得/设置 版本号字符串
-    /// </summary>
-    private string Version { get; set; } = "fetching";
-
-    /// <summary>
-    /// OnInitializedAsync 方法
-    /// </summary>
-    /// <returns></returns>
-    protected override async Task OnInitializedAsync()
-    {
-        Version = await VersionManager.GetVersionAsync("bootstrapblazor.chart");
-    }
-}

src/BootstrapBlazor.Shared/Pages/Samples/Charts.razor.cs

@@ -1,288 +0,0 @@
-// 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 Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading;
-using System.Threading.Tasks;
-
-namespace BootstrapBlazor.Shared.Pages
-{
-    /// <summary>
-    /// 
-    /// </summary>
-    public sealed partial class Charts
-    {
-        /// <summary>
-        /// 
-        /// </summary>
-        [Inject]
-        private ToastService? ToastService { get; set; }
-
-        [Inject]
-        private IJSRuntime? JSRuntime { get; set; }
-
-        private static Random Randomer { get; set; } = new Random();
-
-        private JSInterop<Charts>? Interope { get; set; }
-
-        private Chart? LineChart { get; set; }
-
-        private Chart? BarChart { get; set; }
-
-        private Chart? PieChart { get; set; }
-
-        private Chart? DoughnutChart { get; set; }
-
-        private Chart? BubbleChart { get; set; }
-
-        private bool IsCricle { get; set; }
-
-        private IEnumerable<string> Colors { get; set; } = new List<string>() { "Red", "Blue", "Green", "Orange", "Yellow", "Tomato", "Pink", "Violet" };
-
-        /// <summary>
-        /// 
-        /// </summary>
-        /// <param name="firstRender"></param>
-        protected override async Task OnAfterRenderAsync(bool firstRender)
-        {
-            await base.OnAfterRenderAsync(firstRender);
-
-            if (firstRender && JSRuntime != null)
-            {
-                if (Interope == null) Interope = new JSInterop<Charts>(JSRuntime);
-                await Interope.InvokeVoidAsync(this, "", "_initChart", nameof(ShowToast));
-            }
-        }
-
-        private Task<ChartDataSource> OnInit(int dsCount, int daCount)
-        {
-            var ds = new ChartDataSource();
-            ds.Options.XAxes.Add(new ChartAxes() { LabelString = "天数" });
-            ds.Options.YAxes.Add(new ChartAxes() { LabelString = "数值" });
-
-            ds.Labels = Enumerable.Range(1, daCount).Select(i => i.ToString());
-
-            for (var index = 0; index < dsCount; index++)
-            {
-                ds.Data.Add(new ChartDataset()
-                {
-                    Label = $"数据集 {index}",
-                    Data = Enumerable.Range(1, daCount).Select(i => Randomer.Next(20, 37)).Cast<object>()
-                });
-            }
-            return Task.FromResult(ds);
-        }
-
-        private CancellationTokenSource _chartCancellationTokenSource = new CancellationTokenSource();
-
-        private Task OnPlayChart()
-        {
-            _chartCancellationTokenSource = new CancellationTokenSource();
-            return Task.Run(async () =>
-            {
-                while (!_chartCancellationTokenSource.IsCancellationRequested)
-                {
-                    await Task.Delay(800, _chartCancellationTokenSource.Token);
-                    if (!_chartCancellationTokenSource.IsCancellationRequested) RandomData(BarChart);
-                }
-            });
-        }
-
-        private void OnStopChart()
-        {
-            _chartCancellationTokenSource.Cancel();
-        }
-
-        private Task<ChartDataSource> OnPieInit(int dsCount, int daCount)
-        {
-            var ds = new ChartDataSource();
-            ds.Options.XAxes.Add(new ChartAxes() { LabelString = "天数" });
-            ds.Options.ShowXAxesLine = false;
-
-            ds.Options.YAxes.Add(new ChartAxes() { LabelString = "数值" });
-            ds.Options.ShowYAxesLine = false;
-
-            ds.Labels = Colors.Take(daCount);
-
-            for (var index = 0; index < dsCount; index++)
-            {
-                ds.Data.Add(new ChartDataset()
-                {
-                    Label = $"数据集 {index}",
-                    Data = Enumerable.Range(1, daCount).Select(i => Randomer.Next(20, 37)).Cast<object>()
-                });
-            }
-            return Task.FromResult(ds);
-        }
-
-        private Task<ChartDataSource> OnBubbleInit(int dsCount, int daCount)
-        {
-            var ds = new ChartDataSource
-            {
-                Labels = Enumerable.Range(1, daCount).Select(i => i.ToString())
-            };
-
-            for (var index = 0; index < dsCount; index++)
-            {
-                ds.Data.Add(new ChartDataset()
-                {
-                    Label = $"数据集 {index}",
-                    Data = Enumerable.Range(1, daCount).Select(i => new
-                    {
-                        x = Randomer.Next(10, 40),
-                        y = Randomer.Next(10, 40),
-                        r = Randomer.Next(1, 20)
-                    })
-                });
-            }
-            return Task.FromResult(ds);
-        }
-
-        private void RandomData(Chart? chart)
-        {
-            chart?.Update();
-        }
-
-        private void AddDataSet(Chart? chart, ref int dsCount)
-        {
-            if (dsCount < Colors.Count())
-            {
-                dsCount++;
-                chart?.Update("addDataset");
-            }
-        }
-
-        private void RemoveDataSet(Chart? chart, ref int dsCount)
-        {
-            if (dsCount > 1)
-            {
-                dsCount--;
-                chart?.Update("removeDataset");
-            }
-        }
-
-        private void AddData(Chart? chart, ref int daCount)
-        {
-            var limit = (chart?.ChartType ?? ChartType.Line) switch
-            {
-                ChartType.Line => 14,
-                ChartType.Bar => 14,
-                ChartType.Bubble => 14,
-                _ => Colors.Count()
-            };
-
-            if (daCount < limit)
-            {
-                daCount++;
-                chart?.Update("addData");
-            }
-        }
-
-        private void RemoveData(Chart? chart, ref int daCount)
-        {
-            var limit = (chart?.ChartType ?? ChartType.Line) switch
-            {
-                ChartType.Line => 7,
-                ChartType.Bar => 7,
-                ChartType.Bubble => 4,
-                _ => 2
-            };
-            if (daCount > limit)
-            {
-                daCount--;
-                chart?.Update("removeData");
-            }
-        }
-
-        private void ToggleCircle()
-        {
-            IsCricle = !IsCricle;
-            DoughnutChart?.SetAngle(IsCricle ? 360 : 0);
-            DoughnutChart?.Update("setAngle");
-        }
-
-        /// <summary>
-        /// 
-        /// </summary>
-        [JSInvokable]
-        public void ShowToast()
-        {
-            ToastService?.Show(new ToastOption() { Title = "友情提示", Content = "屏幕宽度过小，如果是手机请横屏观看" });
-        }
-
-        /// <summary>
-        /// 
-        /// </summary>
-        /// <param name="disposing"></param>
-        private void Dispose(bool disposing)
-        {
-            if (disposing) Interope?.Dispose();
-        }
-
-        /// <summary>
-        /// 
-        /// </summary>
-        public void Dispose()
-        {
-            Dispose(true);
-            GC.SuppressFinalize(this);
-        }
-
-        /// <summary>
-        /// 获得事件方法
-        /// </summary>
-        /// <returns></returns>
-        private IEnumerable<EventItem> GetEvents() => new EventItem[]
-        {
-            new EventItem()
-            {
-                Name = "OnInit",
-                Description="组件数据初始化委托方法",
-                Type ="Func<Task<ChartDataSource>>"
-            },
-            new EventItem()
-            {
-                Name = "OnAfterInit",
-                Description="客户端绘制图表完毕后回调此委托方法",
-                Type ="Action"
-            },
-        };
-
-        /// <summary>
-        /// 获得属性方法
-        /// </summary>
-        /// <returns></returns>
-        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
-        {
-            // TODO: 移动到数据库中
-            new AttributeItem() {
-                Name = "Angle",
-                Description = "Bubble 模式下显示角度 180 为 半圆 360 为正圆",
-                Type = "int",
-                ValueList = " — ",
-                DefaultValue = " — ",
-            },
-            new AttributeItem() {
-                Name = "Width",
-                Description = "组件宽度支持单位 如: 100px 75%",
-                Type = "string",
-                ValueList = " — ",
-                DefaultValue = " — "
-            },
-            new AttributeItem() {
-                Name = "ChartType",
-                Description = "设置图表类型",
-                Type = "ChartType",
-                ValueList = "Line|Bar|Pie|Doughnut|Bubble",
-                DefaultValue = "Line"
-            },
-        };
-    }
-}

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Bar.razor

@@ -0,0 +1,33 @@
+@page "/charts/bar"
+
+<Block Title="Bar 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>bar</code> 图">
+    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInit(false)" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" @ref="BarChart" />
+    <div class="text-center mt-2 chart">
+        <div class="btn-group">
+            <button class="btn btn-info" data-method="play" @onclick="@OnPlayChart">
+                <i class="fa fa-play-circle"></i>
+                <span>开启动画</span>
+            </button>
+            <button class="btn btn-info" data-method="stop" @onclick="@OnStopChart">
+                <i class="fa fa-stop-circle"></i>
+                <span>关闭动画</span>
+            </button>
+        </div>
+    </div>
+    <div class="text-center mt-2 chart">
+        <div class="btn-group">
+            <button class="btn btn-primary" @onclick="e => Utility.RandomData(BarChart)"><i class="fa fa-bar-chart"></i><span>随机数据</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(BarChart, ref BarDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(BarChart, ref BarDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.AddData(BarChart, ref BarDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.RemoveData(BarChart, ref BarDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
+        </div>
+    </div>
+    <Logger @ref="Logger" class="mt-3" />
+</Block>
+
+<Block Title="Bar 图" Introduction="通过设置 X/Y 轴 <code>Stacked</code> 属性，控制是否堆砌排列">
+    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInit(true)" />
+</Block>
+
+<ChartToast />

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Bar.razor.cs

@@ -0,0 +1,90 @@
+// 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.Pages.Components;
+using System;
+using System.Collections.Generic;
+using System.Diagnostics.CodeAnalysis;
+using System.Linq;
+using System.Text;
+using System.Threading;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Charts
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class Bar
+    {
+        private Random Randomer { get; } = new Random();
+        private int BarDatasetCount = 2;
+        private int BarDataCount = 7;
+
+        [NotNull]
+        private Chart? BarChart { get; set; }
+
+        [NotNull]
+        private Logger? Logger { get; set; }
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override void OnAfterRender(bool firstRender)
+        {
+            base.OnAfterRender(firstRender);
+
+            if (firstRender)
+            {
+                Logger.Log("Bar 正在加载数据 ...");
+            }
+        }
+
+        private Task OnAfterInit()
+        {
+            Logger.Log("Bar 初始化完毕");
+            return Task.CompletedTask;
+        }
+
+        private Task OnAfterUpdate(ChartAction action) => InvokeAsync(() => Logger.Log($"Bar 图更新数据操作完毕 -- {action}"));
+
+        private Task<ChartDataSource> OnInit(bool stacked)
+        {
+            var ds = new ChartDataSource();
+            ds.Options.Title = "Bar 折线图";
+            ds.Options.X.Title = "天数";
+            ds.Options.Y.Title = "数值";
+            ds.Options.X.Stacked = stacked;
+            ds.Options.Y.Stacked = stacked;
+            ds.Labels = Enumerable.Range(1, BarDataCount).Select(i => i.ToString());
+            for (var index = 0; index < BarDatasetCount; index++)
+            {
+                ds.Data.Add(new ChartDataset()
+                {
+                    Label = $"数据集 {index}",
+                    Data = Enumerable.Range(1, BarDataCount).Select(i => Randomer.Next(20, 37)).Cast<object>()
+                });
+            }
+            return Task.FromResult(ds);
+        }
+
+        private CancellationTokenSource _chartCancellationTokenSource = new();
+
+        private Task OnPlayChart()
+        {
+            _chartCancellationTokenSource = new CancellationTokenSource();
+            return Task.Run(async () =>
+            {
+                while (!_chartCancellationTokenSource.IsCancellationRequested)
+                {
+                    await Task.Delay(800, _chartCancellationTokenSource.Token);
+                    if (!_chartCancellationTokenSource.IsCancellationRequested) await Utility.RandomData(BarChart);
+                }
+            });
+        }
+
+        private void OnStopChart() => _chartCancellationTokenSource.Cancel();
+    }
+}

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Bubble.razor

@@ -0,0 +1,17 @@
+@page "/charts/bubble"
+
+<Block Title="Bubble 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>bubble</code> 图">
+    <Chart ChartType="ChartType.Bubble" OnInitAsync="@OnInit" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" @ref="BubbleChart" />
+    <div class="text-center mt-2 chart">
+        <div class="btn-group">
+            <button class="btn btn-primary" @onclick="e => Utility.RandomData(BubbleChart)"><i class="fa fa-snowflake-o"></i><span>随机数据</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.AddData(BubbleChart, ref BubbleDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.RemoveData(BubbleChart, ref BubbleDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
+        </div>
+    </div>
+    <Logger @ref="Logger" class="mt-3" />
+</Block>
+
+<ChartToast />

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Bubble.razor.cs

@@ -0,0 +1,79 @@
+// 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.Pages.Components;
+using System;
+using System.Diagnostics.CodeAnalysis;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Charts
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class Bubble
+    {
+        private Random Randomer { get; } = new Random();
+        private int BubbleDatasetCount = 2;
+        private int BubbleDataCount = 7;
+
+        [NotNull]
+        private Chart? BubbleChart { get; set; }
+
+        [NotNull]
+        private Logger? Logger { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override void OnAfterRender(bool firstRender)
+        {
+            base.OnAfterRender(firstRender);
+
+            if (firstRender)
+            {
+                Logger.Log("Bubble 正在加载数据 ...");
+            }
+        }
+
+        private Task OnAfterInit()
+        {
+            Logger.Log("Bubble 初始化完毕");
+            return Task.CompletedTask;
+        }
+
+        private Task OnAfterUpdate(ChartAction action)
+        {
+            Logger.Log($"Bubble 图更新数据操作完毕 -- {action}");
+            return Task.CompletedTask;
+        }
+
+        private Task<ChartDataSource> OnInit()
+        {
+            var ds = new ChartDataSource
+            {
+                Labels = Enumerable.Range(1, BubbleDataCount).Select(i => i.ToString())
+            };
+            ds.Options.Title = "Bubble 折线图";
+
+            for (var index = 0; index < BubbleDatasetCount; index++)
+            {
+                ds.Data.Add(new ChartDataset()
+                {
+                    Label = $"数据集 {index}",
+                    Data = Enumerable.Range(1, BubbleDataCount).Select(i => new
+                    {
+                        x = Randomer.Next(10, 40),
+                        y = Randomer.Next(10, 40),
+                        r = Randomer.Next(1, 20)
+                    })
+                });
+            }
+            return Task.FromResult(ds);
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Doughnut.razor

@@ -0,0 +1,18 @@
+@page "/charts/doughnut"
+
+<Block Title="Doughnut 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>doughnut</code> 图">
+    <Chart ChartType="ChartType.Doughnut" Angle="@Angle" OnInitAsync="@OnInit" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" @ref="DoughnutChart" class="pie" />
+    <div class="text-center mt-2 chart">
+        <div class="btn-group">
+            <button class="btn btn-primary" @onclick="e => Utility.RandomData(DoughnutChart)"><i class="fa fa-slack"></i><span>随机数据</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(DoughnutChart, ref DoughnutDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(DoughnutChart, ref DoughnutDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.AddData(DoughnutChart, ref DoughnutDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.RemoveData(DoughnutChart, ref DoughnutDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
+            <button class="btn btn-primary" @onclick="@ToggleCircle"><i class="fa fa-circle-o-notch"></i><span>半圆/全圆</span></button>
+        </div>
+    </div>
+    <Logger @ref="Logger" class="mt-3" />
+</Block>
+
+<ChartToast />

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Doughnut.razor.cs

@@ -0,0 +1,80 @@
+// 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.Pages.Components;
+using System;
+using System.Diagnostics.CodeAnalysis;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Charts
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class Doughnut
+    {
+        private Random Randomer { get; } = new Random();
+        private int DoughnutDatasetCount = 1;
+        private int DoughnutDataCount = 5;
+
+        [NotNull]
+        private Chart? DoughnutChart { get; set; }
+
+        [NotNull]
+        private Logger? Logger { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override void OnAfterRender(bool firstRender)
+        {
+            base.OnAfterRender(firstRender);
+
+            if (firstRender)
+            {
+                Logger.Log("Doughnut 正在加载数据 ...");
+            }
+        }
+
+        private Task OnAfterInit()
+        {
+            Logger.Log("Doughnut 初始化完毕");
+            return Task.CompletedTask;
+        }
+
+        private Task OnAfterUpdate(ChartAction action)
+        {
+            Logger.Log($"Doughnut 图更新数据操作完毕 -- {action}");
+            return Task.CompletedTask;
+        }
+
+        private Task<ChartDataSource> OnInit()
+        {
+            var ds = new ChartDataSource();
+            ds.Options.Title = "Doughnut 折线图";
+            ds.Labels = Utility.Colors.Take(DoughnutDataCount);
+            for (var index = 0; index < DoughnutDatasetCount; index++)
+            {
+                ds.Data.Add(new ChartDataset()
+                {
+                    Label = $"数据集 {index}",
+                    Data = Enumerable.Range(1, DoughnutDataCount).Select(i => Randomer.Next(20, 37)).Cast<object>()
+                });
+            }
+            return Task.FromResult(ds);
+        }
+
+        private bool IsCircle { get; set; }
+        private int Angle { get; set; }
+        private async Task ToggleCircle()
+        {
+            IsCircle = !IsCircle;
+            Angle = IsCircle ? 360 : 0;
+            await DoughnutChart.Update(ChartAction.SetAngle);
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Index.razor

@@ -0,0 +1,39 @@
+@page "/charts/index"
+@layout MainLayout
+
+<h3>Chart 图表</h3>
+
+<h4>通过给定数据，绘画各种图表的组件</h4>
+
+<p>本组件依赖于 <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Chart" target="_blank"><code>BootstrapBlazor.Chart</code></a>，使用本组件时需要引用其组件包</p>
+
+<Tips>
+    <div>本套组件 5.0.19 版本后 <code>chart.js</code> 脚本升级到 <code>3.3.0</code> 为了适配新版本脚本，有部分功能更新或者移除</div>
+</Tips>
+
+<p><b>Nuget 包安装</b></p>
+
+<p>使用 <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Chart" target="_blank">nuget.org</a> 进行 <code>BootstrapBlazor.Chart</code> 组件的安装</p>
+
+<div class="code-label">.NET CLI</div>
+<Pre class="no-highlight">dotnet add package BootstrapBlazor.Chart --version @Version</Pre>
+
+<div class="code-label">PackageReference</div>
+<Pre class="no-highlight">&lt;PackageReference Include="BootstrapBlazor.Chart" Version="@Version" /&gt;</Pre>
+
+<div class="code-label">Package Manager</div>
+<Pre class="no-highlight">Install-Package BootstrapBlazor.Chart -Version @Version</Pre>
+
+<h4>CSS 文件</h4>
+
+<Pre>&lt;link rel="stylesheet" href="_content/BootstrapBlazor.Chart/css/bootstrap.blazor.chart.bundle.min.css" /&gt;</Pre>
+
+<h4>JS 文件</h4>
+
+<Pre>&lt;script src="_content/BootstrapBlazor.Chart/js/bootstrap.blazor.chart.bundle.min.js"&gt;&lt;/script&gt;</Pre>
+
+<p>组件数据在 <code>OnInit</code> 回调委托中进行设置即可</p>
+
+<AttributeTable Items="@GetAttributes()" />
+
+<EventTable Items="@GetEvents()" />

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Index.razor.cs

@@ -0,0 +1,86 @@
+// 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 Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.JSInterop;
+using System;
+using System.Collections.Generic;
+using System.Diagnostics.CodeAnalysis;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Charts
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public sealed partial class Index
+    {
+        [Inject]
+        [NotNull]
+        private NugetVersionService? VersionManager { get; set; }
+
+        private string Version { get; set; } = "fetching";
+
+        /// <summary>
+        /// OnInitializedAsync 方法
+        /// </summary>
+        /// <returns></returns>
+        protected override async Task OnInitializedAsync()
+        {
+            Version = await VersionManager.GetVersionAsync("bootstrapblazor.chart");
+        }
+
+        /// <summary>
+        /// 获得事件方法
+        /// </summary>
+        /// <returns></returns>
+        private static IEnumerable<EventItem> GetEvents() => new EventItem[]
+        {
+            new EventItem()
+            {
+                Name = "OnInitAsync",
+                Description="组件数据初始化委托方法",
+                Type ="Func<Task<ChartDataSource>>"
+            },
+            new EventItem()
+            {
+                Name = "OnAfterInitAsync",
+                Description="客户端绘制图表完毕后回调此委托方法",
+                Type ="Func<Task>"
+            },
+            new EventItem()
+            {
+                Name = "OnAfterUpdateAsync",
+                Description="客户端更新图表完毕后回调此委托方法",
+                Type ="Func<ChartAction, Task>"
+            }
+        };
+
+        /// <summary>
+        /// 获得属性方法
+        /// </summary>
+        /// <returns></returns>
+        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        {
+            // TODO: 移动到数据库中
+            new AttributeItem() {
+                Name = "Width",
+                Description = "组件宽度支持单位 如: 100px 75%",
+                Type = "string",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "ChartType",
+                Description = "设置图表类型",
+                Type = "ChartType",
+                ValueList = "Line|Bar|Pie|Doughnut|Bubble",
+                DefaultValue = "Line"
+            }
+        };
+    }
+}

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Line.razor

@@ -0,0 +1,25 @@
+@page "/charts/line"
+
+<Block Title="Line 图" Introduction="使用 <code>OnInit</code> 回调委托方法，对初始化数据进行赋值后，即可进行绘图操作">
+    <Chart @ref="LineChart" OnInitAsync="() => OnInit(0.4f, false)" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" />
+    <div class="text-center mt-2 chart">
+        <div class="btn-group">
+            <button class="btn btn-primary" @onclick="e => Utility.RandomData(LineChart)"><i class="fa fa-line-chart"></i><span>随机数据</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(LineChart, ref LineDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(LineChart, ref LineDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.AddData(LineChart, ref LineDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.RemoveData(LineChart, ref LineDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
+        </div>
+    </div>
+    <Logger @ref="Logger" class="mt-3" />
+</Block>
+
+<Block Title="Line 图" Introduction="使用设置 <code>ChartDataset</code> 实例的 <code>Tension</code> 参数，调整折线的曲率，默认位 <b>0.4f</b>">
+    <Chart OnInitAsync="() => OnInit(0f, false)" />
+</Block>
+
+<Block Title="Line 图" Introduction="使用设置 <code>ChartDataset</code> 实例的 <code>Data</code> 参数中含 <code>null</code>，折线图使用虚线连接">
+    <Chart OnInitAsync="() => OnInit(0f, true)" />
+</Block>
+
+<ChartToast />

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Line.razor.cs

@@ -0,0 +1,74 @@
+// 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.Pages.Components;
+using System;
+using System.Diagnostics.CodeAnalysis;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Charts
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class Line
+    {
+        private Random Randomer { get; } = new Random();
+        private int LineDatasetCount = 2;
+        private int LineDataCount = 7;
+
+        [NotNull]
+        private Chart? LineChart { get; set; }
+
+        [NotNull]
+        private Logger? Logger { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override void OnAfterRender(bool firstRender)
+        {
+            base.OnAfterRender(firstRender);
+
+            if (firstRender)
+            {
+                Logger.Log("Line 正在加载数据 ...");
+            }
+        }
+
+        private Task OnAfterInit()
+        {
+            Logger.Log("Line 初始化完毕");
+            return Task.CompletedTask;
+        }
+
+        private Task OnAfterUpdate(ChartAction action)
+        {
+            Logger.Log($"Line 图更新数据操作完毕 -- {action}");
+            return Task.CompletedTask;
+        }
+
+        private Task<ChartDataSource> OnInit(float tension, bool hasNull)
+        {
+            var ds = new ChartDataSource();
+            ds.Options.Title = "Line 折线图";
+            ds.Options.X.Title = "天数";
+            ds.Options.Y.Title = "数值";
+            ds.Labels = Enumerable.Range(1, LineDataCount).Select(i => i.ToString());
+            for (var index = 0; index < LineDatasetCount; index++)
+            {
+                ds.Data.Add(new ChartDataset()
+                {
+                    Tension = tension,
+                    Label = $"数据集 {index}",
+                    Data = Enumerable.Range(1, LineDataCount).Select((i, index) => (index == 2 && hasNull) ? null! : (object)Randomer.Next(20, 37))
+                });
+            }
+            return Task.FromResult(ds);
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Pie.razor

@@ -0,0 +1,17 @@
+@page "/charts/pie"
+
+<Block Title="Pie 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>pie</code> 图">
+    <Chart ChartType="ChartType.Pie" OnInitAsync="@OnInit" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" @ref="PieChart" />
+    <div class="text-center mt-2 chart">
+        <div class="btn-group">
+            <button class="btn btn-primary" @onclick="e => Utility.RandomData(PieChart)"><i class="fa fa-pie-chart"></i><span>随机数据</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(PieChart, ref PieDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(PieChart, ref PieDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.AddData(PieChart, ref PieDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
+            <button class="btn btn-primary" @onclick="e => Utility.RemoveData(PieChart, ref PieDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
+        </div>
+    </div>
+    <Logger @ref="Logger" class="mt-3" />
+</Block>
+
+<ChartToast />

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Pie.razor.cs

@@ -0,0 +1,73 @@
+// 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.Pages.Components;
+using System;
+using System.Collections.Generic;
+using System.Diagnostics.CodeAnalysis;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Charts
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class Pie
+    {
+        private Random Randomer { get; } = new Random();
+        private int PieDatasetCount = 1;
+        private int PieDataCount = 5;
+
+        [NotNull]
+        private Chart? PieChart { get; set; }
+
+        [NotNull]
+        private Logger? Logger { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override void OnAfterRender(bool firstRender)
+        {
+            base.OnAfterRender(firstRender);
+
+            if (firstRender)
+            {
+                Logger.Log("Pie 正在加载数据 ...");
+            }
+        }
+
+        private Task OnAfterInit()
+        {
+            Logger.Log("Pie 初始化完毕");
+            return Task.CompletedTask;
+        }
+
+        private Task OnAfterUpdate(ChartAction action)
+        {
+            Logger.Log($"Pie 图更新数据操作完毕 -- {action}");
+            return Task.CompletedTask;
+        }
+
+        private Task<ChartDataSource> OnInit()
+        {
+            var ds = new ChartDataSource();
+            ds.Options.Title = "Pie 折线图";
+            ds.Labels = Utility.Colors.Take(PieDataCount);
+            for (var index = 0; index < PieDatasetCount; index++)
+            {
+                ds.Data.Add(new ChartDataset()
+                {
+                    Label = $"数据集 {index}",
+                    Data = Enumerable.Range(1, PieDataCount).Select(i => Randomer.Next(20, 37)).Cast<object>()
+                });
+            }
+            return Task.FromResult(ds);
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Samples/Charts/Utility.cs

@@ -0,0 +1,96 @@
+// 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 System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Charts
+{
+    /// <summary>
+    /// Chart 工具类
+    /// </summary>
+    internal static class Utility
+    {
+        public static IEnumerable<string> Colors { get; } = new List<string>() { "Red", "Blue", "Green", "Orange", "Yellow", "Tomato", "Pink", "Violet" };
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="chart"></param>
+        public static Task RandomData(Chart chart) => chart.Update(ChartAction.Update);
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="chart"></param>
+        /// <param name="dsCount"></param>
+        public static void AddDataSet(Chart chart, ref int dsCount)
+        {
+            if (dsCount < Colors.Count())
+            {
+                dsCount++;
+                _ = chart.Update(ChartAction.AddDataset);
+            }
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="chart"></param>
+        /// <param name="dsCount"></param>
+        public static void RemoveDataSet(Chart chart, ref int dsCount)
+        {
+            if (dsCount > 1)
+            {
+                dsCount--;
+                _ = chart.Update(ChartAction.RemoveDataset);
+            }
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="chart"></param>
+        /// <param name="daCount"></param>
+        public static void AddData(Chart chart, ref int daCount)
+        {
+            var limit = chart.ChartType switch
+            {
+                ChartType.Line => 14,
+                ChartType.Bar => 14,
+                ChartType.Bubble => 14,
+                _ => Colors.Count()
+            };
+
+            if (daCount < limit)
+            {
+                daCount++;
+                _ = chart.Update(ChartAction.AddData);
+            }
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="chart"></param>
+        /// <param name="daCount"></param>
+        public static void RemoveData(Chart chart, ref int daCount)
+        {
+            var limit = chart.ChartType switch
+            {
+                ChartType.Line => 7,
+                ChartType.Bar => 7,
+                ChartType.Bubble => 4,
+                _ => 2
+            };
+            if (daCount > limit)
+            {
+                daCount--;
+                _ = chart.Update(ChartAction.RemoveData);
+            }
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Samples/CheckboxLists.razor

@@ -11,15 +11,9 @@
         <li>通过 <code>Items</code> 设置候选数据源</li>
         <li>通过 <code>OnSelectedChanged</code> 回调方法获取改变项实例</li>
     </ul>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <CheckboxList @bind-Value="@Value1" Items="@Items1" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]"
-                              OnSelectedChanged="@OnSelectedChanged"></CheckboxList>
-            </div>
-        </div>
-    </div>
-    <Logger @ref="Trace" />
+    <CheckboxList @bind-Value="@Value1" Items="@Items1" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]"
+                  OnSelectedChanged="@OnSelectedChanged"></CheckboxList>
+    <Logger class="mt-3" @ref="Trace" />
 </Block>
 
 <Block Title="客户端验证" Introduction="内置于 ValidateForm 中使用">
@@ -27,15 +21,13 @@
     <p>本例中绑定模型 <code>BindItem</code> 的 <code>Name</code> 字段，通过勾选项自动更改模型数据</p>
     <p>由于内置于 <code>ValidateForm</code> 表单内，本例中增加了 <code>RequiredAttribute</code> 必选要求验证，当取消所有选项后提示验证结果</p>
     <ValidateForm Model="@Dummy">
-        <div class="form-inline">
-            <div class="row">
-                <div class="form-group col-12">
-                    <CheckboxList @bind-Value="@Dummy.Name" Items="@Items2" />
-                </div>
-                <div class="form-group col-12">
-                    <label class="control-label">@Localizer["Foo.BindValue"]</label>
-                    <div class="form-control flex-fill">@Dummy.Name</div>
-                </div>
+        <div class="row g-3">
+            <div class="col-12">
+                <CheckboxList @bind-Value="@Dummy.Name" Items="@Items2" />
+            </div>
+            <div class="col-12">
+                <label class="form-label">@Localizer["Foo.BindValue"]</label>
+                <div class="form-control flex-fill">@Dummy.Name</div>
             </div>
         </div>
     </ValidateForm>
@@ -43,42 +35,36 @@
 
 <Block Title="双向绑定集合" Introduction="绑定值为集合">
     <p>TValue 设置为 <code>IEnumerable&lt;int&gt;</code> 泛型集合，绑定集合的 <code>ValueField</code> 指定字段必须与泛型类型一致</p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <CheckboxList TValue="IEnumerable<int>" Items="@Items3" @bind-Value="@Value2" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
-            </div>
-            <div class="form-group col-12">
-                <label class="control-label">@Localizer["Foo.BindValue"]</label>
-                <div class="form-control">@(string.Join(",", Value2))</div>
-            </div>
+    <div class="row g-3">
+        <div class="col-12">
+            <CheckboxList TValue="IEnumerable<int>" Items="@Items3" @bind-Value="@Value2" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
+        </div>
+        <div class="col-12">
+            <label class="form-label">@Localizer["Foo.BindValue"]</label>
+            <div class="form-control">@(string.Join(",", Value2))</div>
         </div>
     </div>
     <p class="mt-3">TValue 设置为 <code>IEnumerable&lt;string&gt;</code> 泛型集合</p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <CheckboxList TValue="IEnumerable<string>" Items="@Items4" @bind-Value="@Value3" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
-            </div>
-            <div class="form-group col-12">
-                <label class="control-label">@Localizer["Foo.BindValue"]</label>
-                <div class="form-control flex-fill">@(string.Join(",", Value3))</div>
-            </div>
+    <div class="row g-3">
+        <div class="col-12">
+            <CheckboxList TValue="IEnumerable<string>" Items="@Items4" @bind-Value="@Value3" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
+        </div>
+        <div class="col-12">
+            <label class="form-label">@Localizer["Foo.BindValue"]</label>
+            <div class="form-control flex-fill">@(string.Join(",", Value3))</div>
         </div>
     </div>
 </Block>
 
 <Block Title="双向绑定枚举" Introduction="绑定值为枚举">
     <p>当 <code>CheckboxList</code> 绑定一个枚举集合时，<code>Items</code> 不需要指定，<code>Items</code> 会被自动设置成枚举里面所有的值，如果需要绑定部分值时，请自行提供枚举集合 <code>Items</code></p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <CheckboxList @bind-Value="@SelectedEnumValues" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
-            </div>
-            <div class="form-group col-12">
-                <label class="control-label">@Localizer["Foo.BindValue"]</label>
-                <div class="form-control">@(string.Join(",", SelectedEnumValues))</div>
-            </div>
+    <div class="row g-3">
+        <div class="col-12">
+            <CheckboxList @bind-Value="@SelectedEnumValues" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
+        </div>
+        <div class="col-12">
+            <label class="form-label">@Localizer["Foo.BindValue"]</label>
+            <div class="form-control">@(string.Join(",", SelectedEnumValues))</div>
         </div>
     </div>
 </Block>
@@ -86,34 +72,16 @@
 <Block Title="无边框" Introduction="通过设置 <code>ShowBorder=false</code> 不显示边框">
     <p>当验证失败时显示红色边框</p>
     <ValidateForm Model="@Dummy">
-        <div class="form-inline">
-            <div class="row">
-                <div class="form-group col-12">
-                    <CheckboxList @bind-Value="@Dummy.Name" ShowBorder="false" Items="@Items2" />
-                </div>
-            </div>
-        </div>
+        <CheckboxList @bind-Value="@Dummy.Name" ShowBorder="false" Items="@Items2" />
     </ValidateForm>
 </Block>
 
 <Block Title="竖向排列" Introduction="通过设置 <code>IsVertical=true</code> 使checkbox竖向排列">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <CheckboxList @bind-Value="@Dummy.Name" IsVertical="true" ShowBorder="false" Items="@Items2" />
-            </div>
-        </div>
-    </div>
+    <CheckboxList @bind-Value="@Dummy.Name" IsVertical="true" ShowBorder="false" Items="@Items2" />
 </Block>
 
 <Block Title="禁用" Introduction="通过设置 <code>IsDisabled=true</code> 禁用">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <CheckboxList @bind-Value="@Dummy.Name" IsDisabled="true" ShowBorder="false" Items="@Items2" />
-            </div>
-        </div>
-    </div>
+    <CheckboxList @bind-Value="@Dummy.Name" IsDisabled="true" ShowBorder="false" Items="@Items2" />
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/CheckboxLists.razor.cs

@@ -135,7 +135,7 @@ namespace BootstrapBlazor.Shared.Pages
             {
                 Name = "OnSelectedChanged",
                 Description="复选框状态改变时回调此方法",
-                Type ="EventCallback<IEnumerable<SelectedItem>, TValue, Task>"
+                Type ="Func<IEnumerable<SelectedItem>, TValue, Task>"
             }
         };
     }

src/BootstrapBlazor.Shared/Pages/Samples/Checkboxs.razor

@@ -5,91 +5,75 @@
 <h4>一组备选项中进行多选</h4>
 
 <Block Title="基础用法" Introduction="单独使用可以表示两种状态之间的切换，列头或者表头使用时可以表示三种状态之间的切换。组件支持泛型数据绑定，通过 <code>TValue</code> 设置绑定数据类型，通过 <code>State</code> 设置组件状态">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-sm-6">
-                <Checkbox TValue="string" State="CheckboxState.Checked" OnStateChanged="@OnStateChanged" DisplayText="选中" ShowLabel="true"></Checkbox>
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Checkbox TValue="string" State="CheckboxState.UnChecked" OnStateChanged="@OnStateChanged" DisplayText="未选" ShowLabel="true"></Checkbox>
-            </div>
+    <div class="row g-3 form-inline">
+        <div class="col-12 col-sm-6">
+            <Checkbox TValue="string" State="CheckboxState.Checked" OnStateChanged="@OnStateChanged" DisplayText="选中" ShowLabel="true"></Checkbox>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Checkbox TValue="string" State="CheckboxState.UnChecked" OnStateChanged="@OnStateChanged" DisplayText="未选" ShowLabel="true"></Checkbox>
         </div>
     </div>
     <Logger @ref="Trace" class="mt-3" />
 </Block>
 
 <Block Title="禁用复选框" Introduction="复选框不可用状态，通过 <code>IsDisabled</code> 设置组件是否可用">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-md-4">
-                <Checkbox TValue="string" State="CheckboxState.Checked" IsDisabled="true" DisplayText="选中" ShowLabel="true"></Checkbox>
-            </div>
-            <div class="form-group col-12 col-md-4">
-                <Checkbox TValue="string" State="CheckboxState.UnChecked" IsDisabled="true" DisplayText="未选" ShowLabel="true"></Checkbox>
-            </div>
+    <div class="row g-3 form-inline">
+        <div class="col-12 col-md-4">
+            <Checkbox TValue="string" State="CheckboxState.Checked" IsDisabled="true" DisplayText="选中" ShowLabel="true"></Checkbox>
+        </div>
+        <div class="col-12 col-md-4">
+            <Checkbox TValue="string" State="CheckboxState.UnChecked" IsDisabled="true" DisplayText="未选" ShowLabel="true"></Checkbox>
         </div>
     </div>
 </Block>
 
 <Block Title="颜色" Introduction="通过设置 <code>Color</code> 属性改变组件背景色">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-md-4">
-                <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Primary"></Checkbox>
-            </div>
-            <div class="form-group col-12 col-md-4">
-                <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Success"></Checkbox>
-            </div>
-            <div class="form-group col-12 col-md-4">
-                <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Danger"></Checkbox>
-            </div>
-            <div class="form-group col-12 col-md-4">
-                <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Info"></Checkbox>
-            </div>
-            <div class="form-group col-12 col-md-4">
-                <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Warning"></Checkbox>
-            </div>
-            <div class="form-group col-12 col-md-4">
-                <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Dark"></Checkbox>
-            </div>
+    <div class="row g-3 form-inline">
+        <div class="col-12 col-md-4">
+            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Primary"></Checkbox>
+        </div>
+        <div class="col-12 col-md-4">
+            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Success"></Checkbox>
+        </div>
+        <div class="col-12 col-md-4">
+            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Danger"></Checkbox>
+        </div>
+        <div class="col-12 col-md-4">
+            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Info"></Checkbox>
+        </div>
+        <div class="col-12 col-md-4">
+            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Warning"></Checkbox>
+        </div>
+        <div class="col-12 col-md-4">
+            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="选中" ShowLabel="true" Color="@Color.Dark"></Checkbox>
         </div>
     </div>
 </Block>
 
 <Block Title="Label 文字" Introduction="复选框显示文字，通过 <code>DisplayText</code> 设置组件显示文本，点击显示文字时组件状态也会进行翻转">
     <p>设置<code>DisplayText</code> 属性，或者通过双向绑定均可以显示文本信息</p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <Checkbox TValue="string" DisplayText="显示文字" ShowAfterLabel="true"></Checkbox>
-            </div>
-        </div>
-    </div>
+    <Checkbox TValue="string" DisplayText="显示文字" ShowAfterLabel="true"></Checkbox>
 </Block>
 
 <Block Title="双向绑定 boolean 数据" Introduction="绑定组件内变量，数据自动同步，绑定数据类型为 <code>boolean</code> 类型时自动翻转值">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <Checkbox DisplayText="双向绑定" ShowLabel="true" @bind-Value="@BindValue" OnStateChanged="@OnItemChanged"></Checkbox>
-            </div>
-            <div class="form-group col-12">
-                <BootstrapInput @bind-Value="@BindValue" IsDisabled="true"></BootstrapInput>
-            </div>
+    <div class="row g-3 form-inline">
+        <div class="col-12">
+            <Checkbox DisplayText="双向绑定" ShowLabel="true" @bind-Value="@BindValue" OnStateChanged="@OnItemChanged"></Checkbox>
+        </div>
+        <div class="col-12">
+            <BootstrapInput @bind-Value="@BindValue" IsDisabled="true"></BootstrapInput>
         </div>
     </div>
     <Logger @ref="BinderLog" class="mt-3" />
 </Block>
 
 <Block Title="双向绑定 string 数据" Introduction="绑定组件内变量，数据自动同步">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <Checkbox DisplayText="双向绑定" ShowLabel="true" @bind-Value="@BindString" OnStateChanged="@OnItemChangedString"></Checkbox>
-            </div>
-            <div class="form-group col-12">
-                <BootstrapInput @bind-Value="@BindString"></BootstrapInput>
-            </div>
+    <div class="row g-3 form-inline">
+        <div class="col-12">
+            <Checkbox DisplayText="双向绑定" ShowLabel="true" @bind-Value="@BindString" OnStateChanged="@OnItemChangedString"></Checkbox>
+        </div>
+        <div class="col-12">
+            <BootstrapInput @bind-Value="@BindString"></BootstrapInput>
         </div>
     </div>
     <Logger @ref="BinderLog" class="mt-3" />
@@ -97,12 +81,12 @@
 
 <Block Title="表单中使用" Introduction="在表单中使用 <code>Checkbox</code> 时，显示标签文字会放置到组件前面">
     <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
-    <ValidateForm class="form-inline" Model="@Model">
-        <div class="row">
-            <div class="form-group col-12 col-sm-6">
+    <ValidateForm Model="@Model">
+        <div class="row g-3 form-inline">
+            <div class="col-12 col-sm-6">
                 <Checkbox @bind-Value="@Model.BindValue" ShowLabel="true"></Checkbox>
             </div>
-            <div class="form-group col-12 col-sm-6">
+            <div class="col-12 col-sm-6">
                 <Checkbox @bind-Value="@Model.BindValue" ShowLabel="true" DisplayText="手写标签"></Checkbox>
             </div>
         </div>

src/BootstrapBlazor.Shared/Pages/Samples/Collapses.razor

@@ -29,32 +29,8 @@
     <Logger @ref="Trace" class="mt-3" />
 </Block>
 
-<Block Title="指示箭头" Introduction="右侧显示指示箭头">
-    <Collapse ShowArrow="true">
-        <CollapseItems>
-            <CollapseItem Text="一致性 Consistency">
-                <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
-                <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
-            </CollapseItem>
-            <CollapseItem Text="反馈 Feedback" IsCollapsed="false">
-                <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
-                <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
-            </CollapseItem>
-            <CollapseItem Text="效率 Efficiency">
-                <div>简化流程：设计简洁直观的操作流程；</div>
-                <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
-                <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
-            </CollapseItem>
-            <CollapseItem Text="可控 Controllability">
-                <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
-                <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
-            </CollapseItem>
-        </CollapseItems>
-    </Collapse>
-</Block>
-
 <Block Title="手风琴效果" Introduction="每次只能展开一个面板">
-    <Collapse ShowArrow="true" IsAccordion="true">
+    <Collapse IsAccordion="true">
         <CollapseItems>
             <CollapseItem Text="一致性 Consistency">
                 <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
@@ -78,7 +54,7 @@
 </Block>
 
 <Block Title="子项标题颜色" Introduction="每个面板设置不同颜色">
-    <Collapse ShowArrow="true" IsAccordion="true">
+    <Collapse IsAccordion="true">
         <CollapseItems>
             <CollapseItem Text="一致性 Consistency" TitleColor="Color.Primary">
                 <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>

src/BootstrapBlazor.Shared/Pages/Samples/Collapses.razor.cs

@@ -39,13 +39,6 @@ namespace BootstrapBlazor.Shared.Pages
                 ValueList = " — ",
                 DefaultValue = " — "
             },
-            new AttributeItem() {
-                Name = "ShowArrow",
-                Description = "是否显示指示箭头",
-                Type = "bool",
-                ValueList = "true|false",
-                DefaultValue = "false"
-            },
             new AttributeItem() {
                 Name = "IsAccordion",
                 Description = "是否手风琴效果",

src/BootstrapBlazor.Shared/Pages/Samples/ColorPickers.razor

@@ -5,26 +5,32 @@
 <h4>选择颜色使用</h4>
 
 <Block Title="基本用法" Introduction="通过设置 <code>Value</code> 属性设定颜色值">
-    <ColorPicker Value="@Value1" ColorChanged="@OnColorChanged" ShowBar="false" />
+    <ColorPicker Value="@Value1" OnValueChanged="@OnColorChanged" />
     <Logger @ref="Trace" class="mt-3" />
 </Block>
 
 <Block Title="设置初始值" Introduction="通过设置 <code>Value</code> 属性设定颜色值">
     <p>设置 <code>Value="@Value2"</code> 初始化默认值</p>
-    <ColorPicker Value="@Value2" ShowBar="false" />
+    <ColorPicker Value="@Value2" />
 </Block>
 
 <Block Title="双向绑定" Introduction="通过设置 <code>Value</code> 属性设定颜色值">
-    <ColorPicker @bind-Value="@Value3" ShowBar="false" />
+    <ColorPicker @bind-Value="@Value3" />
     <div class="mt-3">Value3: @Value3</div>
 </Block>
 
-<Block Title="显示颜色 Bar" Introduction="通过设置 <code>ShowBar</code> 属性开启右侧颜色预览框">
-    <ColorPicker Value="@Value4" ShowBar="true" />
+<Block Title="禁用" Introduction="通过设置 <code>IsDisabled</code> 属性禁用此组件">
+    <ColorPicker Value="@Value5" IsDisabled="true" />
 </Block>
 
-<Block Title="禁用" Introduction="通过设置 <code>IsDisabled</code> 属性禁用此组件">
-    <ColorPicker Value="@Value5" ShowBar="true" IsDisabled="true" />
+<Block Title="验证表单中使用" Introduction="内置于 <code>ValidateForm</code> 中使用">
+    <ValidateForm Model="Dummy">
+        <div class="row g-3 form-inline">
+            <div class="col-6">
+                <ColorPicker @bind-Value="@Dummy.Name" />
+            </div>
+        </div>
+    </ValidateForm>
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/ColorPickers.razor.cs

@@ -22,14 +22,17 @@ namespace BootstrapBlazor.Shared.Pages
 
         private string? Value1 { get; set; }
 
-        private string Value2 { get; set; } = "#FFF";
+        private string Value2 { get; set; } = "#FFFFFF";
 
-        private string Value3 { get; set; } = "#DDD";
+        private string Value3 { get; set; } = "#DDDDDD";
 
         private string? Value4 { get; set; }
 
         private string? Value5 { get; set; }
 
+        [NotNull]
+        private Foo? Dummy { get; set; } = new Foo() { Name = "#dddddd" };
+
         private Task OnColorChanged(string color)
         {
             Trace.Log($"Selected color: {color}");
@@ -42,16 +45,9 @@ namespace BootstrapBlazor.Shared.Pages
         /// <returns></returns>
         private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
         {
-            new AttributeItem(){
-                Name = "ShowBar",
-                Description = "是否显示右侧颜色预览框",
-                Type = "bool",
-                ValueList = "false/true",
-                DefaultValue = "true"
-            },
             new AttributeItem()
             {
-                Name = "ColorChanged",
+                Name = "OnValueChanged",
                 Description = "颜色改变回调委托方法",
                 Type = "Func<string, Task>",
                 ValueList = "",

src/BootstrapBlazor.Shared/Pages/Samples/DateTimePickers.razor

@@ -18,32 +18,41 @@
 </Block>
 
 <Block Title="数据双向绑定" Introduction="点击确认按钮时间选择框值与文本框值一致">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-sm-6">
-                <div class="d-flex flex-column">
-                    <div class="mb-1"><code>TimeSpan</code> 类型</div>
-                    <TimePickerBody @bind-Value="@SpanValue" />
-                    <BootstrapInput @bind-Value="@SpanValue" Formatter="@FormatterSpanString" style="width: 180px; margin-top: 0.5rem;" />
-                </div>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
+            <div class="d-flex flex-column">
+                <div class="mb-1"><code>TimeSpan</code> 类型</div>
+                <TimePickerBody @bind-Value="@SpanValue" />
+                <BootstrapInput @bind-Value="@SpanValue" Formatter="@FormatterSpanString" style="width: 180px; margin-top: 0.5rem;" />
             </div>
-            <div class="form-group col-12 col-sm-6">
-                <div class="d-flex flex-column">
-                    <div class="mb-1"><code>string</code> 类型</div>
-                    <TimePickerBody Value="@TimeNow" ValueChanged="@OnValueChange" />
-                    <BootstrapInput @bind-Value="@SpanValue2" style="width: 180px; margin-top: 0.5rem;" />
-                </div>
+        </div>
+        <div class="col-12 col-sm-6">
+            <div class="d-flex flex-column">
+                <div class="mb-1"><code>string</code> 类型</div>
+                <TimePickerBody Value="@TimeNow" ValueChanged="@OnValueChange" />
+                <BootstrapInput @bind-Value="@SpanValue2" style="width: 180px; margin-top: 0.5rem;" />
             </div>
         </div>
     </div>
 </Block>
 
-<Block Title="点击弹出日期框" Introduction="以「日」为基本单位，基础的日期选择控件">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-sm-4">
-                <DateTimePicker TValue="DateTime" Value="@DateTime.Today" />
+<Block Title="客户端验证" Introduction="根据自定义验证规则进行数据有效性检查并自动提示">
+    <ValidateForm Model="this">
+        <div class="row g-3">
+            <div class="col-12 col-sm-auto">
+                <DateTimePicker @bind-Value="@this.ModelValidateValue" />
             </div>
+            <div class="col-12 col-sm-auto align-self-end">
+                <Button ButtonType="ButtonType.Submit" Text="@SubmitText" Icon="fa fa-save" />
+            </div>
+        </div>
+    </ValidateForm>
+</Block>
+
+<Block Title="点击弹出日期框" Introduction="以「日」为基本单位，基础的日期选择控件">
+    <div class="row g-3">
+        <div class="col-sm-4">
+            <DateTimePicker TValue="DateTime" Value="@DateTime.Today" />
         </div>
     </div>
 
@@ -51,42 +60,29 @@
 </Block>
 
 <Block Title="数据双向绑定" Introduction="日期组件时间改变时文本框内的数值也跟着改变">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-sm-6">
-                <DateTimePicker TValue="DateTime?" Value="@BindValue" ValueChanged="@DateTimeValueChanged" Placement="Placement.Right" />
-            </div>
-            <div class="form-group col-sm-6">
-                <input class="form-control" @bind="@BindValueString" />
-            </div>
-            <div class="form-group col-sm-12">
-                <Logger @ref="DateTimeLogger" class="mt-3" />
-            </div>
+    <div class="row g-3">
+        <div class="col-sm-6">
+            <DateTimePicker TValue="DateTime?" Value="@BindValue" ValueChanged="@DateTimeValueChanged" Placement="Placement.Right" />
+        </div>
+        <div class="col-sm-6">
+            <input class="form-control" @bind="@BindValueString" />
         </div>
     </div>
 </Block>
 
 <Block Title="带时间的选择器" Introduction="在同一个选择器里选择日期和时间，点击确认按钮后关闭弹窗">
     <p>设置 <code>ViewModel</code> 属性值为 <code>DatePickerViewModel.DateTime</code></p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-sm-4">
-                <DateTimePicker TValue="DateTime" ViewModel="DatePickerViewModel.DateTime" />
-            </div>
-        </div>
-    </div>
+    <DateTimePicker TValue="DateTime" ViewModel="DatePickerViewModel.DateTime" />
 </Block>
 
 <Block Title="允许空时间" Introduction="多用于条件选择">
     <p>绑定值为可为空类型 <code>DateTime?</code> 时自动出现 <b>清空</b> 按钮</p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-sm-8">
-                <DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" />
-            </div>
-            <div class="form-group col-12 col-sm-4">
-                <div class="form-control">@GetNullValueString</div>
-            </div>
+    <div class="row g-3">
+        <div class="col-12 col-sm-8">
+            <DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" />
+        </div>
+        <div class="col-12 col-sm-4">
+            <div class="form-control">@GetNullValueString</div>
         </div>
     </div>
 </Block>
@@ -94,42 +90,37 @@
 <Block Title="显示标签" Introduction="作为表单组件时，显示组件前方标签">
     <p>设置 <code>DisplayText</code> 属性值为 <code>选择时间</code></p>
     <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" DisplayText="选择时间" ShowLabel="true" />
-            </div>
+    <div class="row g-3">
+        <div class="col-12">
+            <DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" DisplayText="选择时间" ShowLabel="true" />
         </div>
     </div>
 </Block>
 
 <Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入">
-    <div class="form-inline">
-        <div class="row">
-            <div class="col-12">
-                <DateTimePicker TValue="DateTime" IsDisabled="true" />
-            </div>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
+            <DateTimePicker TValue="DateTime" IsDisabled="IsDisabled" />
+        </div>
+        <div class="col-12 col-sm-6">
+			<Switch @bind-Value="@IsDisabled" />
         </div>
     </div>
 </Block>
 
 <Block Title="带快捷键侧边栏" Introduction="设置 <code>ShowSidebar</code> 属性值为 <code>true</code> 时，组件显示快捷方式侧边栏">
-    <div class="form-inline">
-        <div class="row">
-            <div class="col-12">
-                <DateTimePicker TValue="DateTime" ShowSidebar="true" ViewModel="DatePickerViewModel.DateTime" />
-            </div>
+    <div class="row g-3">
+        <div class="col-12">
+            <DateTimePicker TValue="DateTime" ShowSidebar="true" ViewModel="DatePickerViewModel.DateTime" />
         </div>
     </div>
 </Block>
 
-<Block Title="设置值范围" Introduction="设置 <code>MinValue</code> 属性值与 <code>MaxValue</code> 限制可选值范围">
-    <div class="form-inline">
-        <div class="row">
-            <div class="col-12">
-                <DateTimePicker TValue="DateTime" ViewModel="DatePickerViewModel.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))" 
-                                MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))" MaxValue="@(DateTime.Today.AddDays(14 - DateTime.Today.Day))" />
-            </div>
+<Block Title="设置值范围" Introduction="设置 <code>MinValue</code> 属性值与 <code>MaxValue</code> 限制可选值范围，本例中设置范围为 <b>45</b> 天">
+    <div class="row g-3">
+        <div class="col-12">
+            <DateTimePicker TValue="DateTime" ViewModel="DatePickerViewModel.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))"
+                            MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))" MaxValue="@(DateTime.Today.AddDays(46 - DateTime.Today.Day))" />
         </div>
     </div>
 </Block>

src/BootstrapBlazor.Shared/Pages/Samples/DateTimePickers.razor.cs

@@ -4,8 +4,12 @@
 
 using BootstrapBlazor.Shared.Common;
 using BootstrapBlazor.Shared.Pages.Components;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
 using System;
 using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using System.Diagnostics.CodeAnalysis;
 using System.Threading.Tasks;
 
 namespace BootstrapBlazor.Shared.Pages
@@ -15,40 +19,49 @@ namespace BootstrapBlazor.Shared.Pages
     /// </summary>
     public sealed partial class DateTimePickers
     {
-        /// <summary>
-        /// 
-        /// </summary>
         private TimeSpan SpanValue { get; set; } = DateTime.Now.Subtract(DateTime.Today);
 
-        /// <summary>
-        /// 
-        /// </summary>
         private string SpanValue2 { get; set; } = DateTime.Now.ToString("HH:mm:ss");
 
-        /// <summary>
-        /// 
-        /// </summary>
+        [NotNull]
         private Logger? DateLogger { get; set; }
 
-        /// <summary>
-        /// 
-        /// </summary>
+        [NotNull]
         private Logger? TimeLogger { get; set; }
 
-        /// <summary>
-        /// 
-        /// </summary>
+        [NotNull]
         private Logger? DateTimeLogger { get; set; }
 
-        /// <summary>
-        /// 
-        /// </summary>
         private DateTime? BindValue { get; set; } = DateTime.Today;
 
         private DateTime? BindNullValue { get; set; }
 
+        private bool IsDisabled { get; set; } = true;
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Required]
+        public DateTime? ModelValidateValue { get; set; }
+
+        private string? SubmitText { get; set; }
+
         private string GetNullValueString => BindNullValue.HasValue ? BindNullValue.Value.ToString("yyyy-MM-dd") : "空值";
 
+        [Inject]
+        [NotNull]
+        private IStringLocalizer<DateTimePickers>? Localizer { get; set; }
+
+        /// <summary>
+        /// OnInitialized 方法
+        /// </summary>
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            SubmitText ??= Localizer[nameof(SubmitText)];
+        }
+
         /// <summary>
         /// 
         /// </summary>
@@ -77,7 +90,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// <param name="d"></param>
         private Task DateValueChanged(DateTime d)
         {
-            DateLogger?.Log($"选择的日期为: {d:yyyy-MM-dd}");
+            DateLogger.Log($"选择的日期为: {d:yyyy-MM-dd}");
             return Task.CompletedTask;
         }
 
@@ -94,7 +107,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// <param name="d"></param>
         private void TimeValueChanged(TimeSpan d)
         {
-            TimeLogger?.Log($"选择的时间为: {d:hh\\:mm\\:ss}");
+            TimeLogger.Log($"选择的时间为: {d:hh\\:mm\\:ss}");
         }
 
         /// <summary>
@@ -104,7 +117,6 @@ namespace BootstrapBlazor.Shared.Pages
         private Task DateTimeValueChanged(DateTime? d)
         {
             BindValue = d;
-            DateTimeLogger?.Log($"选择的时间为: {d:yyyy-MM-dd}");
             return Task.CompletedTask;
         }
 

src/BootstrapBlazor.Shared/Pages/Samples/DateTimeRanges.razor

@@ -10,57 +10,44 @@
 </Block>
 
 <Block Title="数据双向绑定" Introduction="点击确认按钮时间选择框值与文本框值一致">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-sm-6">
-                <DateTimeRange @bind-Value="@DateTimeRangeValue2" />
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <div>
-                    @if (DateTimeRangeValue2.Start != DateTime.MinValue)
-                    {
-                        <span>时间范围：</span> @DateTimeRangeValue2.Start.ToString("yyyy-MM-dd");
-                    }
-                    @if (DateTimeRangeValue2.End != DateTime.MinValue)
-                    {
-                        <span> - </span> @DateTimeRangeValue2.End.ToString("yyyy-MM-dd");
-                    }
-                </div>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
+            <DateTimeRange @bind-Value="@DateTimeRangeValue2" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <div>
+                @if (DateTimeRangeValue2.Start != DateTime.MinValue)
+                {
+                    <span>时间范围：</span> @DateTimeRangeValue2.Start.ToString("yyyy-MM-dd");
+                }
+                @if (DateTimeRangeValue2.End != DateTime.MinValue)
+                {
+                    <span> - </span> @DateTimeRangeValue2.End.ToString("yyyy-MM-dd");
+                }
             </div>
         </div>
     </div>
 </Block>
 
 <Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入">
-    <div class="form-inline">
-        <div class="row">
-            <div class="col-12">
-                <DateTimeRange Value="@DateTimeRangeValue3" IsDisabled="true" />
-            </div>
-        </div>
-    </div>
+	<div class="row g-3">
+		<div class="col-12 col-sm-6">
+			<DateTimeRange Value="@DateTimeRangeValue3" IsDisabled="@IsDisabled" />
+		</div>
+		<div class="col-12 col-sm-6">
+			<Switch @bind-Value="@IsDisabled" />
+		</div>
+	</div>
 </Block>
 
 <Block Title="带快捷键侧边栏" Introduction="设置 <code>ShowSidebar</code> 属性值为 <code>true</code> 时，组件显示快捷方式侧边栏">
     <p>通过设置 <code>ShowSidebar</code> 参数开启显示侧边栏快捷选项功能，通过设置 <code>SidebarItems</code> 参数集合替换组件内置的默认快捷项</p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="col-12">
-                <DateTimeRange Value="@DateTimeRangeValue4" ShowSidebar="true" />
-            </div>
-        </div>
-    </div>
+    <DateTimeRange Value="@DateTimeRangeValue4" ShowSidebar="true" />
 </Block>
 
 <Block Title="显示今天按钮" Introduction="设置 <code>ShowToday</code> 属性值为 <code>true</code> 时，组件下方显示今天快捷按钮">
     <p>点击 <code>今天</code> 按钮时，时间范围为 <code>yyyy-MM-dd 00:00:00 到 yyyy-MM-dd 23:59:59</code></p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="col-12">
-                <DateTimeRange Value="@DateTimeRangeValue4" ShowToday="true" />
-            </div>
-        </div>
-    </div>
+    <DateTimeRange Value="@DateTimeRangeValue4" ShowToday="true" />
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/DateTimeRanges.razor.cs

@@ -28,6 +28,8 @@ namespace BootstrapBlazor.Shared.Pages
 
         private DateTimeRangeValue DateTimeRangeValue4 { get; set; } = new DateTimeRangeValue();
 
+        private bool IsDisabled { get; set; } = true;
+
         private Task OnConfirm(DateTimeRangeValue value)
         {
             DateLogger?.Log($"选择的时间范围是: {value.Start:yyyy-MM-dd} - {value.End:yyyy-MM-dd}");
@@ -51,7 +53,7 @@ namespace BootstrapBlazor.Shared.Pages
                 Name = "OnClearValue",
                 Description="清空按钮回调委托",
                 Type ="Action"
-            } 
+            }
         };
 
         /// <summary>

src/BootstrapBlazor.Shared/Pages/Samples/Dialogs.razor

@@ -13,7 +13,17 @@
 <Pre>&lt;Dialog /&gt;</Pre>
 
 <Block Title="基本用法" Introduction="通过设置 <code>DialogOption</code> 属性对模态框进行基本属性设置">
-    <Button @onclick="@OnClick">点击打开 Dialog</Button>
+    <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>
+</Block>
+
+<Block Title="自定义标题栏" Introduction="通过设置 <code>HeaderTemplate</code> 属性对模态框标题栏进行自定义设置">
+    <div>
+        <Button OnClick="@OnCustomerHeaderClick" Text="弹窗" />
+    </div>
 </Block>
 
 <Block Title="弹出复杂组件" Introduction="通过调用 <code>Show&lt;Counter&gt;()</code> 来弹出一个自定义组件">
@@ -31,27 +41,25 @@
 </Block>
 
 <Block Title="实战应用" Introduction="本例中通过传递一个主键，在弹窗内的组件通过此主键进行数据查询，并将结果显示在弹窗内">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group 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="form-group col-12 col-sm-6">
-                <Button @onclick="@OnClickShowDataById">弹窗</Button>
-            </div>
+    <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>
 </Block>
@@ -62,6 +70,12 @@
     <Button @onclick="@Show">Dialog</Button>
 </Block>
 
+<Block Title="禁用 Header 中的关闭按钮" Introduction="本例讲解如何通过代码打开与关闭弹窗">
+    <p>设置参数 <code>ShowHeaderCloseButton</code> 禁止弹窗 <code>Header</code> 右侧显示 <b>关闭</b> 按钮</p>
+
+    <Button @onclick="@ShowNoHeaderCloseButtonDialog">Dialog</Button>
+</Block>
+
 <Block Title="多级弹窗" Introduction="点击弹窗内部按钮继续弹出对话窗">
     <p>功能介绍</p>
     <ul class="ul-demo">
@@ -97,14 +111,10 @@
         <li>再次点击弹出模态弹窗时，组件内行选中状态保持一致</li>
         <li>弹窗中未选择用户时禁止关闭弹窗</li>
     </ul>
-    <div class="form-inline">
-        <label class="control-label">收件人：</label>
-        <div class="input-group flex-fill">
-            <BootstrapInput placeholder="请输入 ..." Value="@InputValue"></BootstrapInput>
-            <div class="input-group-append">
-                <Button Icon="fa fa-vcard-o" OnClick="@OnEmailButtonClick"></Button>
-            </div>
-        </div>
+    <label class="form-label">收件人：</label>
+    <div class="input-group">
+        <BootstrapInput placeholder="请输入 ..." Value="@InputValue"></BootstrapInput>
+        <Button Icon="fa fa-vcard-o" OnClick="@OnEmailButtonClick"></Button>
     </div>
 </Block>
 

src/BootstrapBlazor.Shared/Pages/Samples/Dialogs.razor.cs

@@ -29,16 +29,48 @@ namespace BootstrapBlazor.Shared.Pages
         [NotNull]
         private DialogService? DialogService { 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 KeyValuePair<string, object>[]
+            {
+                new(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[]
+            BodyTemplate = BootstrapDynamicComponent.CreateComponent<Button>(new KeyValuePair<string, object>[]
             {
-                new KeyValuePair<string, object?>(nameof(Button.ChildContent), new RenderFragment(builder => builder.AddContent(0, "我是服务创建的按钮")))
+                new(nameof(Button.ChildContent), new RenderFragment(builder => builder.AddContent(0, "我是服务创建的按钮")))
             })
             .Render()
         });
@@ -49,10 +81,25 @@ namespace BootstrapBlazor.Shared.Pages
             {
                 Title = "利用代码关闭弹出框",
             };
-            option.BodyTemplate = BootstrapDynamicComponent.CreateComponent<Button>(new[]
+            option.BodyTemplate = BootstrapDynamicComponent.CreateComponent<Button>(new KeyValuePair<string, object>[]
             {
-                new KeyValuePair<string, object?>(nameof(Button.Text), "点击关闭弹窗"),
-                new KeyValuePair<string, object?>(nameof(Button.OnClick), EventCallback.Factory.Create<MouseEventArgs>(this, async () => await option.Dialog.Close()))
+                new(nameof(Button.Text), "点击关闭弹窗"),
+                new(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 KeyValuePair<string, object>[]
+            {
+                new(nameof(Button.Text), "点击关闭弹窗"),
+                new(nameof(Button.OnClick), EventCallback.Factory.Create<MouseEventArgs>(this, async () => await option.Dialog.Close()))
             }).Render();
             await DialogService.Show(option);
         }
@@ -93,7 +140,7 @@ namespace BootstrapBlazor.Shared.Pages
                 ShowFooter = false,
                 BodyContext = DataPrimaryId
             };
-            op.BodyTemplate = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new KeyValuePair<string, object?>[]
+            op.BodyTemplate = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new KeyValuePair<string, object>[]
             {
                 new(nameof(DataDialogComponent.OnClose), new Action(async () => await op.Dialog.Close()))
             }).Render();
@@ -107,7 +154,7 @@ namespace BootstrapBlazor.Shared.Pages
             var result = await DialogService.ShowModal<ResultDialogDemo>(new ResultDialogOption()
             {
                 Title = "带返回值模态弹出框",
-                ComponentParamters = new KeyValuePair<string, object?>[]
+                ComponentParamters = new KeyValuePair<string, object>[]
                 {
                     new(nameof(ResultDialogDemo.Value), DemoValue1),
                     new(nameof(ResultDialogDemo.ValueChanged), EventCallback.Factory.Create<int>(this, v => DemoValue1 = v))
@@ -128,7 +175,7 @@ namespace BootstrapBlazor.Shared.Pages
                 BodyContext = new ResultDialogDemo2.FooContext() { Count = 10, Emails = InputValue },
                 ButtonYesText = "选择",
                 ButtonYesIcon = "fa fa-search",
-                ComponentParamters = new KeyValuePair<string, object?>[]
+                ComponentParamters = new KeyValuePair<string, object>[]
                 {
                     // 用于初始化已选择的用户邮件
                     new(nameof(ResultDialogDemo2.Emails), Emails),
@@ -173,6 +220,13 @@ namespace BootstrapBlazor.Shared.Pages
                     ValueList = " — ",
                     DefaultValue = " — "
                 },
+                new AttributeItem() {
+                    Name = "HeaderTemplate",
+                    Description = "模态主体 ModalHeader 模板",
+                    Type = "RenderFragment",
+                    ValueList = " — ",
+                    DefaultValue = " — "
+                },
                 new AttributeItem() {
                     Name = "BodyTemplate",
                     Description = "模态主体 ModalBody 组件",
@@ -208,6 +262,13 @@ namespace BootstrapBlazor.Shared.Pages
                     ValueList = "true|false",
                     DefaultValue = "true"
                 },
+                new AttributeItem() {
+                    Name = "ShowHeaderCloseButton",
+                    Description = "是否显示标题栏右侧关闭按钮",
+                    Type = "boolean",
+                    ValueList = "true|false",
+                    DefaultValue = "true"
+                },
                 new AttributeItem() {
                     Name = "ShowFooter",
                     Description = "是否显示 Footer",

src/BootstrapBlazor.Shared/Pages/Samples/Displays.razor

@@ -5,7 +5,7 @@
 <h4>显示静态文本数据</h4>
 
 <Block Title="基础用法" Introduction="仅显示">
-    <div class="row">
+    <div class="row g-3">
         <div class="col-auto col-form-label">
             <span>基本用法</span>
         </div>
@@ -17,112 +17,95 @@
 
 <Block Title="双向绑定数据" Introduction="通过双向绑定可以自动获取资源文件中的显示标签">
     <p><code>Display</code> 组件开启双向绑定时，会根据绑定的 <code>Model</code> 属性值去自动获取 <code>Display/DisplayName</code> 标签值并且显示为前置 <code>Label</code>，通过 <code>DisplayText</code> 属性可以自定义显示前置标签，或者通过 <code>ShowLabel</code> 属性关闭前置标签是否显示</p>
-    <div class="form-inline">
-        <div class="row">
+    <div class="row g-3">
+        <div class="col-12">
             <Divider Text="自定义标签" />
-            <div class="form-group col-12">
-                <p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
-            </div>
-            <div class="form-group col-12">
-                <Display @bind-Value="@Model.Name" DisplayText="自定义标签" ShowLabel="true" />
-            </div>
+        </div>
+        <div class="col-12">
+            <p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display @bind-Value="@Model.Name" DisplayText="自定义标签" ShowLabel="true" />
+        </div>
+        <div class="col-12">
             <Divider Text="占位" />
-            <div class="form-group col-12">
-                <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
-            </div>
-            <div class="form-group col-12">
-                <Display @bind-Value="@Model.Name" ShowLabel="true" />
-            </div>
+        </div>
+        <div class="col-12">
+            <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display @bind-Value="@Model.Name" ShowLabel="true" />
+        </div>
+        <div class="col-12">
             <Divider Text="不占位" />
-            <div class="form-group col-12">
-                <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
-            </div>
-            <div class="form-group col-12">
-                <Display @bind-Value="@Model.Name" />
-            </div>
+        </div>
+        <div class="col-12">
+            <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display @bind-Value="@Model.Name" />
         </div>
     </div>
 </Block>
 
 <Block Title="泛型绑定" Introduction="<code>Display</code> 组件内置对 <code>枚举</code> <code>集合</code> <code>数组</code> 进行处理，如不符合条件时，请自定义格式化或者回调委托方法">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-sm-6">
-                <Display FormatString="000" @bind-Value="@Model.Count" ShowLabel="true" DisplayText="整型" />
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Display @bind-Value="@Model.Education" ShowLabel="true" DisplayText="枚举" />
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Display @bind-Value="@Model.Hobby" ShowLabel="true" DisplayText="集合" />
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Display @bind-Value="@ByteArray" ShowLabel="true" DisplayText="数组" />
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Display Value="@DateTime.Now" ShowLabel="true" DisplayText="DateTime" />
-            </div>
-            <div class="form-group col-12 col-sm-6">
-                <Display Value="@DateTimeOffset.Now" ShowLabel="true" DisplayText="DateTimeOffset" />
-            </div>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
+            <Display FormatString="000" @bind-Value="@Model.Count" ShowLabel="true" DisplayText="整型" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display @bind-Value="@Model.Education" ShowLabel="true" DisplayText="枚举" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display @bind-Value="@Model.Hobby" ShowLabel="true" DisplayText="集合" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display @bind-Value="@ByteArray" ShowLabel="true" DisplayText="数组" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display Value="@DateTime.Now" ShowLabel="true" DisplayText="DateTime" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display Value="@DateTimeOffset.Now" ShowLabel="true" DisplayText="DateTimeOffset" />
         </div>
     </div>
 </Block>
 
 <Block Title="表单内使用" Introduction="<code>Display</code> 组件在表单组件 <code>EditorForm</code> 中使用，多用于明细页，不可编辑模式">
-    <p><b><code>form-inline form-group</code></b> 模式</p>
     <EditorForm Model="@Model" ItemsPerRow="3" IsDisplay="true">
         <FieldItems>
             <EditorItem @bind-Field="@Model.Hobby" Data="@Hobbys" />
         </FieldItems>
     </EditorForm>
-
-    <p><b><code>form-inline</code></b> 模式</p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="col-12 col-sm-6"><Display @bind-Value="@Model.Count" ShowLabel="true" DisplayText="整型" /></div>
-            <div class="col-12 col-sm-6"><Display @bind-Value="@Model.Education" ShowLabel="true" DisplayText="枚举" /></div>
-        </div>
-    </div>
 </Block>
 
 <Block Title="自定义格式" Introduction="设置 <code>FormatString</code> 属性值为 <code>yyyy-MM-dd</code> 时，组件显示的时间格式为年月日">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-sm-6">设置 <code class="ml-1">FormatString</code></div>
-            <div class="form-group col-12 col-sm-6">
-                <Display Value="DateTime.Now" FormatString="yyyy-MM-dd" />
-            </div>
-            <div class="form-group col-12 col-sm-6">设置 <code class="ml-1">Formatter</code></div>
-            <div class="form-group col-12 col-sm-6">
-                <Display Value="DateTime.Now" FormatterAsync="@DateTimeFormatter" />
-            </div>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">设置 <code class="ms-1">FormatString</code></div>
+        <div class="col-12 col-sm-6">
+            <Display Value="DateTime.Now" FormatString="yyyy-MM-dd" />
+        </div>
+        <div class="col-12 col-sm-6">设置 <code class="ms-1">Formatter</code></div>
+        <div class="col-12 col-sm-6">
+            <Display Value="DateTime.Now" FormatterAsync="@DateTimeFormatter" />
         </div>
     </div>
     <p class="mt-3"><code>Display</code> 组件绑定 <code>byte[]</code> 数组，格式化成 <code>base64</code> 编码字符串示例</p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12 col-sm-6">设置 <code class="ml-1">Formatter</code></div>
-            <div class="form-group col-12 col-sm-6">
-                <Display Value="@ByteArray" FormatterAsync="@ByteArrayFormatter" />
-            </div>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">设置 <code class="ms-1">Formatter</code></div>
+        <div class="col-12 col-sm-6">
+            <Display Value="@ByteArray" FormatterAsync="@ByteArrayFormatter" />
         </div>
     </div>
 </Block>
 
-<Block Title="自动翻译为 Text" Introduction="设置 <code>Data</code> 值为 <code>IEnumerable&lt;SelectedItem&gt;</code> 集合，组件将通过此数据集，进行通过 <code>Value</code> 显示 <code>Text</code> 翻译工作">
+<Block Title="自动翻译为 Text" Introduction="设置 <code>Lookup</code> 值为 <code>IEnumerable&lt;SelectedItem&gt;</code> 集合，组件将通过此数据集，进行通过 <code>Value</code> 显示 <code>Text</code> 翻译工作">
     <p>
-        <div>本例中组件 <code>Value="@@IntValue"</code> 设置 <code>Data="@@IntValueSource"</code> 组件将 <code>Value</code> 值对应的 <code>Text</code> 显示出来</div>
+        <div>本例中组件 <code>Value="@@IntValue"</code> 设置 <code>Lookup="@@IntValueSource"</code> 组件将 <code>Value</code> 值对应的 <code>Text</code> 显示出来</div>
         <div><b>InitValue</b>: 1,2,3</div>
         <div><b>IntValueSource</b>: Text1,Text2,Text3</div>
     </p>
-    <div class="form-inline">
-        <div class="row">
-            <div class="col-12 col-sm-6">
-                <Display Value="@IntValue" Data="@IntValueSource" />
-            </div>
-        </div>
-    </div>
+    <Display Value="@IntValue" Lookup="@IntValueSource" />
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/Drawers.razor

@@ -6,7 +6,7 @@
 
 <Block Title="基本用法" Introduction="呼出一个临时的侧边栏, 可以从多个方向呼出">
     <p class="d-flex flex-wrap drawer-demo">
-        <Radio Items="@DrawerDirection" OnStateChanged="@OnStateChanged" />
+        <RadioList TValue="SelectedItem" Items="@DrawerDirection" OnSelectedChanged="@OnStateChanged" />
     </p>
     <p>
         <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = true)">点我打开</button>

src/BootstrapBlazor.Shared/Pages/Samples/Drawers.razor.cs

@@ -23,7 +23,7 @@ namespace BootstrapBlazor.Shared.Pages
 
         private Placement DrawerAlign { get; set; }
 
-        private Task OnStateChanged(CheckboxState state, SelectedItem val)
+        private Task OnStateChanged(IEnumerable<SelectedItem> values, SelectedItem val)
         {
             DrawerAlign = val.Value switch
             {

src/BootstrapBlazor.Shared/Pages/Samples/DropdownWidgets.razor

@@ -18,7 +18,7 @@
                             <div style="width: 40px; height: 40px;">
                                 <Avatar IsCircle="true" IsIcon="true" Size="Size.Small" />
                             </div>
-                            <div class="ml-2">
+                            <div class="ms-2">
                                 <div class="d-flex position-relative">
                                     <h4>Argo Zhang</h4>
                                     <small><i class="fa fa-clock-o"></i> @(4 + index) mins</small>
@@ -41,7 +41,7 @@
                     {
                         <a class="dropdown-item d-flex align-items-center" href="#" @onclick:preventDefault>
                             <i class="fa fa-users text-primary"></i>
-                            <div class="ml-2">5 new members joined</div>
+                            <div class="ms-2">5 new members joined</div>
                         </a>
                     }
                 </BodyTemplate>

src/BootstrapBlazor.Shared/Pages/Samples/Dropdowns.razor

@@ -14,68 +14,69 @@
 </Block>
 
 <Block Title="带有颜色的下拉框" Introduction='提供各种颜色的警告信息框 引用 <code>Color="Color.Primary"</code> 等颜色及样式类来定义下拉菜单的外在表现'>
-    <div class="row">
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Primary"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Secondary"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Info"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Warning"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Danger"></Dropdown></div>
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Primary"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Secondary"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Info"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Warning"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Danger"></Dropdown></div>
     </div>
 </Block>
 
 <Block Title="分裂式按钮下拉菜单" Introduction='可用与单个按钮下拉菜单近似的标记创建分裂式下拉菜单，添加 ShowSplit="true"(使用分裂式组件时需要加上 <code>DropdownType="DropdownType.ButtonGroup </code>") 插入此符号为下拉选项作适当的间隔（距）处理。'>
-    <div class="row">
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Primary"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Secondary"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Info"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Warning"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Danger"></Dropdown></div>
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Primary"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Secondary"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Info"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Warning"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Danger"></Dropdown></div>
     </div>
 </Block>
 
 <Block Title="尺寸大小定义" Introduction="下拉菜单有各种大小规格可以选用 <code>Size</code> 属性，包括预设及分裂式按钮下拉菜单。">
-    <div class="row">
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Size="Size.ExtraSmall"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Size="Size.Small"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Size="Size.Medium"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Size="Size.Large"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Size="Size.ExtraLarge"></Dropdown></div>
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Size="Size.ExtraSmall"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Size="Size.Small"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Size="Size.Medium"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Size="Size.Large"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Size="Size.ExtraLarge"></Dropdown></div>
     </div>
 </Block>
 
 <Block Title="展开方向" Introduction='增加 <code>Direction="Direction.Dropup" </code> 样式，使下拉菜单向上展开。'>
-    <div class="row">
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Direction="Direction.Dropleft"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Direction="Direction.Dropup"></Dropdown></div>
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Direction="Direction.Dropright"></Dropdown></div>
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Direction="Direction.Dropleft"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Direction="Direction.Dropup"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Direction="Direction.Dropright"></Dropdown></div>
     </div>
 </Block>
 
 <Block Title="菜单对齐" Introduction='默认情况下，一个下拉菜单自动从顶部和左侧的父级100％定位。添加.dropdown-menu-right 到.dropdown-menu右侧轻松对齐下拉菜单。'>
     <div class="row">
-        <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Secondary" MenuAlignment="Alignment.Right"></Dropdown></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TItem="string" Items="Items" Color="Color.Secondary" MenuAlignment="Alignment.Right"></Dropdown></div>
     </div>
 </Block>
 
 <Block Title="绑定数据源" Introduction='点击右侧按钮时，下拉框内菜单项会增加'>
-    <div class="row">
-        <div class="form-group col-12 col-sm-6">
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
             <Dropdown TItem="string" Items="@Foos">
             </Dropdown>
         </div>
-        <div class="form-group col-12 col-sm-6">
+        <div class="col-12 col-sm-6">
             <Button @onclick="@AddItem">添加</Button>
+            <Button @onclick="@RemoveItem" Color="Color.Danger">删除</Button>
         </div>
     </div>
 </Block>
 
 <Block Title="绑定数据源" Introduction="改变选项时，下拉框内菜单项会增加">
-    <div class="row">
-        <div class="form-group col-12">
-            <Radio Items="@RadioItems" OnStateChanged="@OnRadioItemChanged">
-            </Radio>
+    <div class="row g-3">
+        <div class="col-12">
+            <RadioList TValue="SelectedItem" Items="@RadioItems" OnSelectedChanged="@OnRadioItemChanged">
+            </RadioList>
         </div>
-        <div class="form-group col-12">
+        <div class="col-12">
             <Dropdown TItem="string" Items="@RadioDropDownItems">
             </Dropdown>
         </div>

src/BootstrapBlazor.Shared/Pages/Samples/Dropdowns.razor.cs

@@ -58,7 +58,15 @@ namespace BootstrapBlazor.Shared.Pages
             Foos.Add(new SelectedItem($"{Foos.Count()}", $"城市 {Foos.Count()}"));
         }
 
-        private Task OnRadioItemChanged(CheckboxState state, SelectedItem item)
+        private void RemoveItem()
+        {
+            if (Foos.Any())
+            {
+                Foos.RemoveAt(0);
+            }
+        }
+
+        private Task OnRadioItemChanged(IEnumerable<SelectedItem> values, SelectedItem item)
         {
             RadioDropDownItems.Add(new SelectedItem($"{RadioDropDownItems.Count() + 1}", $"城市 {RadioDropDownItems.Count()}"));
             StateHasChanged();

src/BootstrapBlazor.Shared/Pages/Samples/EditDialogs.razor

@@ -7,12 +7,17 @@
 <p><code>EditDialog</code> 组件是 <code>Dialog</code> 组件的扩展，适用于数据弹出窗编辑。</p>
 
 <Tips>
-    <p>通过调用注入服务 <code>DialogService</code> 的 <code>ShowEditDialog</code> 方法直接弹出编辑对话框，大大减少代码量。<code>EditDialogOption</code> 配置类继承 <code>DialogOption</code>，更多参数设置请点击 <a href="dialogs" target="_blank">[传送门]</a></p>
+	<p>通过调用注入服务 <code>DialogService</code> 的 <code>ShowEditDialog</code> 方法直接弹出编辑对话框，大大减少代码量。<code>EditDialogOption</code> 配置类继承 <code>DialogOption</code>，更多参数设置请点击 <a href="dialogs" target="_blank">[传送门]</a></p>
 </Tips>
 
 <Block Title="基础用法" Introduction="通过绑定 <code>TModel</code> 数据模型，自动生成模型各个字段的可编辑表单">
-    <Button Text="点击弹出表单编辑弹窗" OnClickWithoutRender="@ShowDialog" />
-    <Logger @ref="Trace" class="mt-3" />
+	<Button Text="编辑弹窗(左对齐)" OnClickWithoutRender="@ShowDialog" />
+	<Button Text="编辑弹窗(右对齐)" OnClickWithoutRender="@ShowAlignDialog" />
+	<Logger @ref="Trace" class="mt-3" />
+</Block>
+
+<Block Title="设置绑定模型部分属性不显示" Introduction="通过设置 <code>IEditorItem</code> 实例的 <code>Editable=false</code>, 实现编辑弹窗不显示此属性">
+	<Button Text="弹窗" OnClickWithoutRender="@ShowEditDialog" />
 </Block>
 
 <AttributeTable Items="@GetAttributes()" Title="EditDialogOption 属性" />

src/BootstrapBlazor.Shared/Pages/Samples/EditDialogs.razor.cs

@@ -47,6 +47,71 @@ namespace BootstrapBlazor.Shared.Pages
                 Title = "编辑对话框",
                 Model = Model,
                 Items = items,
+                ItemsPerRow = 2,
+                RowType = RowType.Inline,
+                OnCloseAsync = () =>
+                {
+                    Trace.Log("关闭按钮被点击");
+                    return Task.CompletedTask;
+                },
+                OnSaveAsync = context =>
+                {
+                    Trace.Log("保存按钮被点击");
+                    return Task.FromResult(true);
+                }
+            };
+
+            await DialogService.ShowEditDialog(option);
+        }
+
+        private async Task ShowAlignDialog()
+        {
+            var items = EditorItem<Foo>.GenerateEditorItems();
+            var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
+            item.Data = Foo.GenerateHobbys(Localizer);
+
+            var option = new EditDialogOption<Foo>()
+            {
+                Title = "编辑对话框",
+                Model = Model,
+                Items = items,
+                ItemsPerRow = 2,
+                RowType = RowType.Inline,
+                LabelAlign = Alignment.Right,
+                OnCloseAsync = () =>
+                {
+                    Trace.Log("关闭按钮被点击");
+                    return Task.CompletedTask;
+                },
+                OnSaveAsync = context =>
+                {
+                    Trace.Log("保存按钮被点击");
+                    return Task.FromResult(true);
+                }
+            };
+
+            await DialogService.ShowEditDialog(option);
+        }
+
+        private async Task ShowEditDialog()
+        {
+            var items = EditorItem<Foo>.GenerateEditorItems();
+            var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
+            item.Data = Foo.GenerateHobbys(Localizer);
+
+            // 设置 地址与数量 不可编辑
+            item = items.First(i => i.GetFieldName() == nameof(Foo.Address));
+            item.Editable = false;
+            item = items.First(i => i.GetFieldName() == nameof(Foo.Count));
+            item.Editable = false;
+
+            var option = new EditDialogOption<Foo>()
+            {
+                Title = "编辑对话框",
+                Model = Model,
+                Items = items,
+                ItemsPerRow = 2,
+                RowType = RowType.Inline,
                 OnCloseAsync = () =>
                 {
                     Trace.Log("关闭按钮被点击");
@@ -117,6 +182,27 @@ namespace BootstrapBlazor.Shared.Pages
                 Type = "Func<Task>",
                 ValueList = " — ",
                 DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "ItemsPerRow",
+                Description = "每行显示组件数量",
+                Type = "int?",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "RowType",
+                Description = "设置组件布局方式",
+                Type = "RowType",
+                ValueList = "Row|Inline",
+                DefaultValue = "Row"
+            },
+            new AttributeItem() {
+                Name = "LabelAlign",
+                Description = "Inline 布局模式下标签对齐方式",
+                Type = "Alignment",
+                ValueList = "None|Left|Center|Right",
+                DefaultValue = "None"
             }
         };
     }

src/BootstrapBlazor.Shared/Pages/Samples/EditorForms.razor

@@ -22,7 +22,7 @@
                 <EditorItem @bind-Field="@Model.Complete" Editable="false" />
                 <EditorItem @bind-Field="@Model.Hobby">
                     <EditTemplate Context="value">
-                        <div class="form-group col-12">
+                        <div class="col-12">
                             <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
                         </div>
                     </EditTemplate>
@@ -45,7 +45,7 @@
                     <EditorItem @bind-Field="@ValidateModel.DateTime" Readonly="true" />
                     <EditorItem @bind-Field="@ValidateModel.Hobby">
                         <EditTemplate Context="value">
-                            <div class="form-group col-12">
+                            <div class="col-12">
                                 <CheckboxList @bind-Value="@ValidateModel.Hobby" Items="@Hobbys" />
                             </div>
                         </EditTemplate>
@@ -81,10 +81,10 @@
                     <EditorItem @bind-Field="@Model.Address" />
                     <EditorItem @bind-Field="@Model.Count">
                         <EditTemplate Context="value">
-                            <div class="form-group col-6">
+                            <div class="col-12 col-sm-6">
                                 <Select SkipValidate="true" @bind-Value="@Model.Count" Items="@DummyItems" ShowSearch="true" />
                             </div>
-                            <div class="form-group col-6">
+                            <div class="col-12 col-sm-6">
                                 <BootstrapInput Value="@Model.Count" readonly="true" />
                             </div>
                         </EditTemplate>
@@ -115,6 +115,25 @@
     </GroupBox>
 </Block>
 
+<Block Title="自定义渲染组件类型" Introduction="通过设置 <code>CompnentType</code> 属性值来控制渲染组件类型">
+    <ul class="ul-demo">
+        <li><code>Inline</code> 布局模式下通过设置 <code>LabelAlign="Alignment.Right"</code> 使表单内标签右对齐</li>
+        <li><code>Buttons</code> 模板内可嵌套 <code>div</code> 并设置样式 <code>text-end</code> 使按钮右侧对齐</li>
+    </ul>
+    <ValidateForm Model="@Model">
+        <EditorForm Model="@Model" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right">
+            <FieldItems>
+                <EditorItem @bind-Field="@Model.Hobby" Data="@Hobbys" />
+            </FieldItems>
+            <Buttons>
+                <div class="text-end">
+                    <Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="提交" />
+                </div>
+            </Buttons>
+        </EditorForm>
+    </ValidateForm>
+</Block>
+
 <AttributeTable Items="@GetAttributes()" />
 
 <AttributeTable Title="EditorItem 属性" Items="@GetEditorItemAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/EditorForms.razor.cs

@@ -98,6 +98,27 @@ namespace BootstrapBlazor.Shared.Pages
                 Type = "bool",
                 ValueList = "true/false",
                 DefaultValue = "true"
+            },
+            new AttributeItem() {
+                Name = "ItemsPerRow",
+                Description = "每行显示组件数量",
+                Type = "int?",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "RowType",
+                Description = "设置组件布局方式",
+                Type = "RowType",
+                ValueList = "Row|Inline",
+                DefaultValue = "Row"
+            },
+            new AttributeItem() {
+                Name = "LabelAlign",
+                Description = "Inline 布局模式下标签对齐方式",
+                Type = "Alignment",
+                ValueList = "None|Left|Center|Right",
+                DefaultValue = "None"
             }
         };
 

src/BootstrapBlazor.Shared/Pages/Samples/Editors.razor

@@ -30,7 +30,7 @@
     <p>通过 <code>bind-Value</code> 对 <code>EditorValue</code> 后台属性进行双向绑定，编辑框内进行编辑后点击 <b>完成</b> 按钮，下方文本框内即可显示编辑后结果</p>
     <Editor @bind-Value="@EditorValue" OnValueChanged="@OnValueChanged"></Editor>
 
-    <label class="control-label mt-3">显示编辑内容：</label>
+    <label class="form-label mt-3">显示编辑内容：</label>
     <textarea class="form-control mt-3">@EditorValue</textarea>
     <div class="mt-3">
         <Button OnClick="SetValue">Reset</Button>

src/BootstrapBlazor.Shared/Pages/Samples/Empties.razor

@@ -0,0 +1,24 @@
+@page "/empties"
+@inject NavigationManager NavigationManager
+
+<h3>@Title</h3>
+<h4>@SubTitle</h4>
+
+<Block Title="基本用法" Introduction="添加 <code>Empty</code> 标签即可">
+    <Empty />
+</Block>
+
+<Block Title="设置空状态图片路径" Introduction="设置 <code>Image</code> 属性即可">
+    <Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" Width="133" Text="暂无数据" />
+</Block>
+
+<Block Title="自定义空状态模板" Introduction="内套 <code>Template</code> 标签渲染自定义组件">
+    <Empty Image="_content/BootstrapBlazor.Shared/images/empty.svg">
+        <Template>
+            <Button OnClick="@(()=>NavigationManager.NavigateTo("components"))">返回上一页</Button>
+        </Template>
+    </Empty>
+</Block>
+
+<AttributeTable Items="@GetAttributes()" />
+

src/BootstrapBlazor.Shared/Pages/Samples/Empties.razor.cs

@@ -13,7 +13,7 @@ namespace BootstrapBlazor.Shared.Pages
     /// <summary>
     /// 
     /// </summary>
-    public sealed partial class Emptys
+    public partial class Empties
     {
 
         /// <summary>
@@ -26,14 +26,14 @@ namespace BootstrapBlazor.Shared.Pages
         /// 
         /// </summary>
         [Parameter]
-        public string? subTitle { get; set; }
+        public string? SubTitle { get; set; }
 
         /// <summary>
         /// 
         /// </summary>
         [Inject]
         [NotNull]
-        private IStringLocalizer<Emptys>? localizer { get; set; }
+        private IStringLocalizer<Empties>? Localizer { get; set; }
 
         /// <summary>
         /// 
@@ -42,15 +42,15 @@ namespace BootstrapBlazor.Shared.Pages
         protected override void OnInitialized()
         {
             base.OnInitialized();
-            Title = localizer[nameof(Title)];
-            subTitle = localizer[nameof(subTitle)];
+            Title = Localizer[nameof(Title)];
+            SubTitle = Localizer[nameof(SubTitle)];
         }
 
         /// <summary>
         /// 获得属性方法
         /// </summary>
         /// <returns></returns>
-        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        private static IEnumerable<AttributeItem> GetAttributes() => new[]
         {
             // TODO: 移动到数据库中
             new AttributeItem() {
@@ -61,11 +61,11 @@ namespace BootstrapBlazor.Shared.Pages
                 DefaultValue = " — "
             },
             new AttributeItem() {
-                Name = "Description",
+                Name = "Text",
                 Description = "自定义描述信息",
                 Type = "string",
                 ValueList = " — ",
-                DefaultValue = " 暂无描述 "
+                DefaultValue = "暂无描述"
             },
             new AttributeItem() {
                 Name = "Width",
@@ -82,11 +82,18 @@ namespace BootstrapBlazor.Shared.Pages
                 DefaultValue = " 100 "
             },
             new AttributeItem() {
-                Name = "Telemplate",
+                Name = "Template",
                 Description = "自定义模板",
                 Type = "RenderFragment",
                 ValueList = " — ",
                 DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "ChildContent",
+                Description = "子组件",
+                Type = "RenderFragment",
+                ValueList = " — ",
+                DefaultValue = " — "
             }
         };
     }

src/BootstrapBlazor.Shared/Pages/Samples/Emptys.razor

@@ -1,25 +0,0 @@
-@page "/empty"
-@namespace BootstrapBlazor.Shared.Pages
-@inject NavigationManager NavigationManager
-
-<h3>@Title</h3>
-<h4>@subTitle</h4>
-
-<Block Title="基本用法" Introduction="添加 <code>Empty</code> 标签即可">
-  <Empty />
-</Block>
-
-<Block Title="自定义空状态图片路径" Introduction="设置 <code>Image</code> 属性替换默认图片">
-  <Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" Width="133" Description="暂无数据" />
-</Block>
-
-<Block Title="自定义空状态模板" Introduction="内套 <code>Telemplate</code> 标签渲染自定义组件">
-  <Empty>
-    <Telemplate>
-      <Button OnClick='(()=>NavigationManager.NavigateTo("components"))'>返回上一页</Button>
-    </Telemplate>
-  </Empty>
-</Block>
-
-<AttributeTable Items="@GetAttributes()" />
-

src/BootstrapBlazor.Shared/Pages/Samples/FloatingLabels.razor

@@ -0,0 +1,73 @@
+@page "/floatinglabels"
+@inject IStringLocalizer<Inputs> Localizer
+
+<h3>FloatingLabel 输入框</h3>
+
+<h4>通过鼠标或键盘输入字符</h4>
+
+<Block Title="基础用法" Introduction="提供基本的文本录入组件">
+	<FloatingLabel LabelText="Text" TValue="string" />
+</Block>
+
+<Block Title="单向绑定数据" Introduction="显示组件内变量值">
+	<FloatingLabel LabelText="Text" Value="@Model.Name" />
+</Block>
+
+<Block Title="客户端验证" Introduction="根据自定义验证规则进行数据有效性检查并自动提示">
+	<ValidateForm Model="@Model">
+		<FloatingLabel LabelText="客户端验证" maxlength="5" @bind-Value="@Model.Name" />
+	</ValidateForm>
+</Block>
+
+<Block Title="密码框" Introduction="通过设置属性 <code>type</code> 值为 <code>password</code> 使输入文字后以 <code>*</code> 进行屏蔽的密码输入框">
+	<p>为了支持更多的文本框属性本组件可以直接写入 <code>type="email"</code> <code>type="number"</code> <code>type="phone"</code> 等 <code>html5</code> 新标准支持的全部属性值，组件未设置 <code>type</code> 值时使用默认的 <code>type="text"</code></p>
+	<FloatingLabel LabelText="密码框" TValue="string" type="password" maxlength="5" style="width: 200px;" />
+</Block>
+
+<Block Title="泛型绑定" Introduction="<code>BootstrapInput</code> 组件双向绑定值是泛型的，本例中双向绑定一个 int 类型数值">
+	<div class="row g-3">
+		<div class="col-12 col-sm-6">
+			<FloatingLabel LabelText="泛型绑定" FormatString="000" step="1" @bind-Value="@Model.Count" />
+		</div>
+		<div class="col-12 col-sm-6 align-self-center">
+			<div class="col-form-label">绑定数值: @Model.Count.ToString("000")</div>
+		</div>
+	</div>
+</Block>
+
+<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入">
+	<FloatingLabel LabelText="禁用" TValue="string" IsDisabled="true" />
+</Block>
+
+<Block Title="自定义格式" Introduction="设置 <code>FormatString</code> 属性值为 <code>yyyy-MM-dd</code> 时，组件显示的时间格式为年月日">
+	<div class="row g-3">
+		<div class="col-12 col-sm-6 col-form-label align-self-center">设置 <code class="ms-1">FormatString</code></div>
+		<div class="col-12 col-sm-6">
+			<FloatingLabel LabelText="FormatString" Value="DateTime.Now" FormatString="yyyy-MM-dd" IsDisabled="true" />
+		</div>
+		<div class="col-12 col-sm-6 col-form-label align-self-center">设置 <code class="ms-1">Formatter</code></div>
+		<div class="col-12 col-sm-6">
+			<FloatingLabel LabelText="Formatter" Value="DateTime.Now" Formatter="@DateTimeFormatter" IsDisabled="true" />
+		</div>
+	</div>
+	<p class="mt-3"><code>BootstrapInput</code> 组件绑定 <code>byte[]</code> 数组，格式化成 <code>base64</code> 编码字符串示例</p>
+	<div class="row g-3">
+		<div class="col-12 col-sm-6 col-form-label align-self-center">设置 <code class="ms-1">Formatter</code></div>
+		<div class="col-12 col-sm-6">
+			<FloatingLabel LabelText="字节数组" Value="@ByteArray" Formatter="@ByteArrayFormatter" IsDisabled="true" />
+		</div>
+	</div>
+</Block>
+
+<Block Title="密码框" Introduction="使用 <code>BootstrapPassword</code> 组件">
+	<div class="row g-3">
+		<div class="col-auto col-form-label align-self-center">
+			<span>基本用法</span>
+		</div>
+		<div class="col-6">
+			<FloatingLabel LabelText="请输入密码" type="password" TValue="string" />
+		</div>
+	</div>
+</Block>
+
+<AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/FloatingLabels.razor.cs

@@ -0,0 +1,92 @@
+// 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.Shared.Common;
+using BootstrapBlazor.Shared.Pages.Components;
+using System;
+using System.Collections.Generic;
+
+namespace BootstrapBlazor.Shared.Pages
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class FloatingLabels
+    {
+        private string? PlaceHolderText { get; set; }
+
+        private byte[] ByteArray { get; set; } = new byte[] { 0x01, 0x12, 0x34, 0x56 };
+
+        private static string ByteArrayFormatter(byte[] source) => Convert.ToBase64String(source);
+
+        private Foo Model { get; set; } = new Foo() { Name = "张三" };
+
+        private static string DateTimeFormatter(DateTime source) => source.ToString("yyyy-MM-dd");
+
+        /// <summary>
+        /// 
+        /// </summary>
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            PlaceHolderText = Localizer["PlaceHolder"];
+        }
+
+        private static IEnumerable<AttributeItem> GetAttributes() => new[]
+        {
+            new AttributeItem() {
+                Name = "ChildContent",
+                Description = "验证控件",
+                Type = "RenderFragment",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "ShowLabel",
+                Description = "是否显示前置标签",
+                Type = "bool",
+                ValueList = "true|false",
+                DefaultValue = "false"
+            },
+            new AttributeItem() {
+                Name = "DisplayText",
+                Description = "前置标签显示文本",
+                Type = "string",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "FormatString",
+                Description = "数值格式化字符串",
+                Type = "string",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "Formatter",
+                Description = "TableHeader 实例",
+                Type = "RenderFragment<TItem>",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem()
+            {
+                Name = "type",
+                Description = "控件类型",
+                Type = "string",
+                ValueList = "text / number / email / url / password",
+                DefaultValue = "text"
+            },
+            new AttributeItem()
+            {
+                Name = "IsDisabled",
+                Description = "是否禁用 默认为 fasle",
+                Type = "bool",
+                ValueList = "true|false",
+                DefaultValue = "false"
+            }
+        };
+    }
+}