From 3ad2812cbdee98df0a471405ee93695c005529d8 Mon Sep 17 00:00:00 2001
From: Alex Chow <zhouchuanglin@gmail.com>
Date: Sat, 19 Mar 2022 22:27:48 +0100
Subject: [PATCH 1/3] =?UTF-8?q?Table=20=E7=BC=96=E8=BE=91=E6=A1=86=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E9=95=BF=E5=AD=97=E6=AE=B5=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=E6=82=AC=E5=81=9C=E6=8F=90=E7=A4=BA,=20IsShowLabel?=
 =?UTF-8?q?=E7=9A=84=E6=8E=A7=E4=BB=B6=E4=B9=9F=E4=B8=80=E6=A0=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

IsShowLabel的控件都加上title="@DisplayText"
---
 src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor  | 2 +-
 src/BootstrapBlazor/Components/Cascader/Cascader.razor          | 2 +-
 src/BootstrapBlazor/Components/Checkbox/Checkbox.razor          | 2 +-
 src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor      | 2 +-
 src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor    | 2 +-
 .../Components/DateTimePicker/DateTimePicker.razor              | 2 +-
 .../Components/DateTimeRange/DateTimeRange.razor                | 2 +-
 src/BootstrapBlazor/Components/Display/Display.razor            | 2 +-
 src/BootstrapBlazor/Components/Dropdown/Dropdown.razor          | 2 +-
 src/BootstrapBlazor/Components/Input/BootstrapInput.razor       | 2 +-
 .../Components/InputNumber/BootstrapInputNumber.razor           | 2 +-
 src/BootstrapBlazor/Components/IpAddress/IpAddress.razor        | 2 +-
 src/BootstrapBlazor/Components/Radio/RadioList.razor            | 2 +-
 src/BootstrapBlazor/Components/Select/MultiSelect.razor         | 2 +-
 src/BootstrapBlazor/Components/Select/Select.razor              | 2 +-
 src/BootstrapBlazor/Components/Switch/NullSwitch.razor          | 2 +-
 src/BootstrapBlazor/Components/Switch/Switch.razor              | 2 +-
 src/BootstrapBlazor/Components/Textarea/Textarea.razor          | 2 +-
 src/BootstrapBlazor/Components/Toggle/Toggle.razor              | 2 +-
 src/BootstrapBlazor/Components/Transfer/Transfer.razor          | 2 +-
 src/BootstrapBlazor/Components/Upload/AvatarUpload.razor        | 2 +-
 src/BootstrapBlazor/Components/Upload/ButtonUpload.razor        | 2 +-
 src/BootstrapBlazor/Components/Upload/CardUpload.razor          | 2 +-
 src/BootstrapBlazor/Components/Upload/InputUpload.razor         | 2 +-
 24 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor b/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor
index 2ba2c9669..64fe01781 100644
--- a/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor
+++ b/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor
@@ -3,7 +3,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
+    <label class="form-label" required="@Required" for="@Id" title="@DisplayText">@DisplayText</label>
 }
 <div class="@ClassString" @ref="AutoCompleteElement">
     <input @attributes="AdditionalAttributes" class="@ClassName" autocomplete="off" type="@Type" placeholder="@PlaceHolder" @bind-value="@CurrentValueAsString" @bind-value:event="oninput" @onblur="OnBlur" @onkeyup="OnKeyUp" @ref="FocusElement" />
diff --git a/src/BootstrapBlazor/Components/Cascader/Cascader.razor b/src/BootstrapBlazor/Components/Cascader/Cascader.razor
index 3ceab7899..dcb4b8c3e 100644
--- a/src/BootstrapBlazor/Components/Cascader/Cascader.razor
+++ b/src/BootstrapBlazor/Components/Cascader/Cascader.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" for="@InputId">@DisplayText</label>
+    <label class="form-label" required="@Required" for="@InputId" title="@DisplayText">@DisplayText</label>
 }
 <div class="cascade menu">
     <div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" class="@ClassName">
diff --git a/src/BootstrapBlazor/Components/Checkbox/Checkbox.razor b/src/BootstrapBlazor/Components/Checkbox/Checkbox.razor
index 5ad2e7aee..6a5e8794d 100644
--- a/src/BootstrapBlazor/Components/Checkbox/Checkbox.razor
+++ b/src/BootstrapBlazor/Components/Checkbox/Checkbox.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
+    <label class="form-label" required="@Required" for="@Id" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="AdditionalAttributes" class="@ClassString" aria-checked="@StateString">
     <input class="@InputClassString" type="checkbox" id="@Id" disabled="@Disabled" checked="@CheckedString" @onclick="@OnToggleClick" />
diff --git a/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor b/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor
index cce192aa4..30158da7d 100644
--- a/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor
+++ b/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required">@DisplayText</label>
+    <label class="form-label" required="@Required" title="@DisplayText">@DisplayText</label>
 }
 <CascadingValue Value="this" IsFixed="true">
     <div @attributes="@AdditionalAttributes" id="@Id" class="@GetClassString()" role="checkbox" tabindex="0" hidefocus="true">
diff --git a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor
index dfc17c940..c53f47120 100644
--- a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor
+++ b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor
@@ -3,7 +3,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
+    <label class="form-label" required="@Required" for="@Id" title="@DisplayText">@DisplayText</label>
 }
 <div class="input-group color-picker">
     <input @attributes="@AdditionalAttributes" type="color" class="form-control form-control-color" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" />
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor
index c6862716c..a33b7074a 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor
+++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required">@DisplayText</label>
+    <label class="form-label" required="@Required" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" @ref="Picker" data-bs-placement="@PlacementString">
     <div class="datetime-picker-bar">
diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor
index 64c35dad6..84f040959 100644
--- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor
+++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor
@@ -3,7 +3,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required">@DisplayText</label>
+    <label class="form-label" required="@Required" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" class="@ClassString" @ref="PickerRange" data-bs-placement="@PlacementString">
     <div class="datetime-range-bar" style="@BarStyleString">
diff --git a/src/BootstrapBlazor/Components/Display/Display.razor b/src/BootstrapBlazor/Components/Display/Display.razor
index a7483a1ec..e05ed64c2 100644
--- a/src/BootstrapBlazor/Components/Display/Display.razor
+++ b/src/BootstrapBlazor/Components/Display/Display.razor
@@ -4,6 +4,6 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label is-display">@DisplayText</label>
+    <label class="form-label is-display" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="AdditionalAttributes" class="@ClassString">@CurrentTextAsString</div>
diff --git a/src/BootstrapBlazor/Components/Dropdown/Dropdown.razor b/src/BootstrapBlazor/Components/Dropdown/Dropdown.razor
index 5f9997449..dcc797b57 100644
--- a/src/BootstrapBlazor/Components/Dropdown/Dropdown.razor
+++ b/src/BootstrapBlazor/Components/Dropdown/Dropdown.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" for="@Id">@DisplayText</label>
+    <label class="form-label" for="@Id" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" id="@Id" class="@DirectionClassName">
     <button type="button" class="@ButtonClassName" data-bs-toggle="@DropdownToggle" disabled="@Disabled">@GetText</button>
diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor
index 5903856df..eeb017184 100644
--- a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor
+++ b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
+    <label class="form-label" required="@Required" for="@Id" title="@DisplayText">@DisplayText</label>
 }
 
 <input @attributes="@AdditionalAttributes" type="@Type" placeholder="@PlaceHolder" id="@Id" readonly="@ReadonlyString" class="@ClassName" disabled="@Disabled" @bind-value="CurrentValueAsString" @bind-value:event="onchange" @ref="FocusElement" />
diff --git a/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor b/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor
index 093a4d053..e5d3ceab4 100644
--- a/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor
+++ b/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
+    <label class="form-label" required="@Required" for="@Id" title="@DisplayText">@DisplayText</label>
 }
 @if (ShowButton)
 {
diff --git a/src/BootstrapBlazor/Components/IpAddress/IpAddress.razor b/src/BootstrapBlazor/Components/IpAddress/IpAddress.razor
index 120ded575..23e51396a 100644
--- a/src/BootstrapBlazor/Components/IpAddress/IpAddress.razor
+++ b/src/BootstrapBlazor/Components/IpAddress/IpAddress.razor
@@ -3,7 +3,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
+    <label class="form-label" required="@Required" for="@Id" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" class="@ClassName" id="@Id" @ref="IPAddressElement">
     <input type="number" class="input-number-fix ipv4-cell" min="0" max="255" disabled="@Disabled" value="@Value1" @onchange="ValueChanged1" />
diff --git a/src/BootstrapBlazor/Components/Radio/RadioList.razor b/src/BootstrapBlazor/Components/Radio/RadioList.razor
index 36a0559e9..eb794dc94 100644
--- a/src/BootstrapBlazor/Components/Radio/RadioList.razor
+++ b/src/BootstrapBlazor/Components/Radio/RadioList.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required">@DisplayText</label>
+    <label class="form-label" required="@Required" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" class="@GetClassString("radio-list")">
     @foreach (var item in Items)
diff --git a/src/BootstrapBlazor/Components/Select/MultiSelect.razor b/src/BootstrapBlazor/Components/Select/MultiSelect.razor
index ed963a969..cba46e46f 100644
--- a/src/BootstrapBlazor/Components/Select/MultiSelect.razor
+++ b/src/BootstrapBlazor/Components/Select/MultiSelect.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
+    <label class="form-label" required="@Required" for="@Id" title="@DisplayText">@DisplayText</label>
 }
 <div class="@ClassString" @ref="SelectElement">
     <div class="@ToggleClassString" tabindex="0" hidefocus="true" outline="0" id="@Id" @onclick="@ToggleMenu">
diff --git a/src/BootstrapBlazor/Components/Select/Select.razor b/src/BootstrapBlazor/Components/Select/Select.razor
index f85cb1d8a..3d8dcaf56 100644
--- a/src/BootstrapBlazor/Components/Select/Select.razor
+++ b/src/BootstrapBlazor/Components/Select/Select.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" for="@InputId">@DisplayText</label>
+    <label class="form-label" required="@Required" for="@InputId" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" class="@ClassName" @ref="SelectElement">
     <CascadingValue Value="this" IsFixed="true">
diff --git a/src/BootstrapBlazor/Components/Switch/NullSwitch.razor b/src/BootstrapBlazor/Components/Switch/NullSwitch.razor
index edd4fe0c5..f38a8b29d 100644
--- a/src/BootstrapBlazor/Components/Switch/NullSwitch.razor
+++ b/src/BootstrapBlazor/Components/Switch/NullSwitch.razor
@@ -3,7 +3,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required">@DisplayText</label>
+    <label class="form-label" required="@Required" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" class="@ClassName" style="@SwitchStyleName">
     <span class="@CoreClassName" data-inner-text="@GetInnerText()" style="@StyleName" @onclick="@OnClick" />
diff --git a/src/BootstrapBlazor/Components/Switch/Switch.razor b/src/BootstrapBlazor/Components/Switch/Switch.razor
index 66b0f4233..91f961462 100644
--- a/src/BootstrapBlazor/Components/Switch/Switch.razor
+++ b/src/BootstrapBlazor/Components/Switch/Switch.razor
@@ -3,7 +3,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required">@DisplayText</label>
+    <label class="form-label" required="@Required" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" class="@ClassName" style="@SwitchStyleName">
     <span class="@CoreClassName" data-inner-text="@GetInnerText()" style="@StyleName" @onclick:stopPropagation @onclick="OnClick" />
diff --git a/src/BootstrapBlazor/Components/Textarea/Textarea.razor b/src/BootstrapBlazor/Components/Textarea/Textarea.razor
index 635177e95..2bf974c52 100644
--- a/src/BootstrapBlazor/Components/Textarea/Textarea.razor
+++ b/src/BootstrapBlazor/Components/Textarea/Textarea.razor
@@ -3,7 +3,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
+    <label class="form-label" required="@Required" for="@Id" title="@DisplayText">@DisplayText</label>
 }
 <textarea @attributes="AdditionalAttributes" id="@Id" class="@ClassName" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="onchange"></textarea>
 <CascadingValue Value="this" IsFixed="true">
diff --git a/src/BootstrapBlazor/Components/Toggle/Toggle.razor b/src/BootstrapBlazor/Components/Toggle/Toggle.razor
index 9f317629d..f7d283c21 100644
--- a/src/BootstrapBlazor/Components/Toggle/Toggle.razor
+++ b/src/BootstrapBlazor/Components/Toggle/Toggle.razor
@@ -3,7 +3,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" @onclick="@OnClick">@DisplayText</label>
+    <label class="form-label" required="@Required" @onclick="@OnClick" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="AdditionalAttributes" class="@WrapperClassString">
     <div class="@ClassName" style="@StyleName" @onclick="@OnClick">
diff --git a/src/BootstrapBlazor/Components/Transfer/Transfer.razor b/src/BootstrapBlazor/Components/Transfer/Transfer.razor
index 15a46a8de..8a9ca433f 100644
--- a/src/BootstrapBlazor/Components/Transfer/Transfer.razor
+++ b/src/BootstrapBlazor/Components/Transfer/Transfer.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required">@DisplayText</label>
+    <label class="form-label" required="@Required" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" class="transfer">
     <TransferPanel Items="@LeftItems" Text="@LeftPanelText" IsDisabled="@IsDisabled"
diff --git a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor
index 5477d1482..c1121b668 100644
--- a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor
+++ b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required">@DisplayText</label>
+    <label class="form-label" required="@Required" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" class="@ClassString" @ref="UploaderElement">
     <div class="upload-body is-avatar">
diff --git a/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor b/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor
index e8541d160..c7ca7b559 100644
--- a/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor
+++ b/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required">@DisplayText</label>
+    <label class="form-label" required="@Required" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" class="@ClassString" @ref="UploaderElement">
     <Button class="@BrowserButtonClassString" IsDisabled="@IsUploadButtonDisabled" Icon="@BrowserButtonIcon" Text="@BrowserButtonText" />
diff --git a/src/BootstrapBlazor/Components/Upload/CardUpload.razor b/src/BootstrapBlazor/Components/Upload/CardUpload.razor
index fbdd100f8..89b70b20c 100644
--- a/src/BootstrapBlazor/Components/Upload/CardUpload.razor
+++ b/src/BootstrapBlazor/Components/Upload/CardUpload.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required">@DisplayText</label>
+    <label class="form-label" required="@Required" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" class="@ClassString" @ref="UploaderElement">
     <div class="@BodyClassString">
diff --git a/src/BootstrapBlazor/Components/Upload/InputUpload.razor b/src/BootstrapBlazor/Components/Upload/InputUpload.razor
index fc23a2d82..e316dab0c 100644
--- a/src/BootstrapBlazor/Components/Upload/InputUpload.razor
+++ b/src/BootstrapBlazor/Components/Upload/InputUpload.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
+    <label class="form-label" required="@Required" for="@Id" title="@DisplayText">@DisplayText</label>
 }
 <div @attributes="@AdditionalAttributes" class="@ClassString" @ref="UploaderElement">
     <div class="input-group">
-- 
Gitee


From 632f69dab7d7582b10d2a8f8109574479f47ffd4 Mon Sep 17 00:00:00 2001
From: Argo-Lenovo <argo@163.com>
Date: Sun, 20 Mar 2022 15:52:07 +0800
Subject: [PATCH 2/3] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E8=B5=84=E6=BA=90?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Shared/Locales/en.json | 315 +++++++++++----------
 src/BootstrapBlazor.Shared/Locales/zh.json |   5 +-
 2 files changed, 161 insertions(+), 159 deletions(-)

diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json
index 32c248be4..de9ced53f 100644
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@@ -438,7 +438,7 @@
     "ExceptionTestIntroduce": "In this example code, an error code that divides by zero is written. Because <code>try/catch</code> is used to capture the exception, the error message is displayed in the console below",
     "ButtonText": "test",
     "Block2Title": "OnErrorHandleAsync",
-    "Block2Intro": "Set custom exception handling logic by setting <code>OnErrorHandleAsync </code> callback method",
+    "Block2Intro": "Set custom exception handling logic by setting <code>OnErrorHandleAsync</code> callback method",
     "Tips": "Both the <code>Layout</code> component and the <code>Tab</code> component have built-in <code>ErrorLogger</code> components. Please do not add them in the above two components. The following is the simplified example code"
   },
   "BootstrapBlazor.Shared.Samples.Splits": {
@@ -520,7 +520,7 @@
     "Block1Intro": "A wide range of basic usages are applicable.",
     "Block2Title": "Bottom bar",
     "Block2Intro": "Set the parameter <code>IsBottom</code> value is <b>true</b> menu bar at the bottom of the container, for the mover",
-    "Tips2": "Because the <b> bottom bar menu</b> is relatively positioned relative to the parent container, you need to set the parent node style <code>position-</code>, or customize the style <code>theposition-fixed</code>",
+    "Tips2": "Because the <b>bottom bar menu</b> is relatively positioned relative to the parent container, you need to set the parent node style <code>position-</code>, or customize the style <code>theposition-fixed</code>",
     "Block3Title": "Top bar menu with icon",
     "Block3Intro": "For simple website apps, set the menu icon by setting the menu item <code>the <code>Icon</code> property of the MenuItem</code>",
     "Block4Title": "Sidebar",
@@ -539,14 +539,14 @@
     "Block8Intro": "Set the custom component into the menu by setting the <code>Component</code> property of the MenuItem</code> <code>",
     "Block9Title": "Custom node shrinkage",
     "Block9Intro": "Set whether the node is receding by setting the <code>IsCollapsed</code> property of the <code>MenuItem</code>",
-    "P2": "In this example, the <b> permission settings </b> node is expanded and the remaining nodes are in the recess state",
+    "P2": "In this example, the <b>permission settings</b>node is expanded and the remaining nodes are in the recess state",
     "Block10Title": "Dynamically change the menu",
     "Block10Intro": "Change the menu item by dynamically setting <code>Theitems</code> property values",
     "Block10Button1": "Update the menu",
     "Block10Button2": "Reset the menu",
     "Block11Title": "Some menus disable functionality",
     "Block11Intro": "Set whether the node is disabled by setting the <code>IsDisabled</code> property of the</code>MenuItem<code>",
-    "P3": "In this example<b> navigation two</b> node is disabled and the menu and its submenu are not clickable",
+    "P3": "In this example <b>navigation two</b> node is disabled and the menu and its submenu are not clickable",
     "b1": "Example of a disablement of the sidebar",
     "Desc1": "A collection of menu component data",
     "Desc2": "Whether it is a sidebar",
@@ -709,7 +709,7 @@
     "Block4Intro": "Set the tab icon by setting the <code>Icon</code> property of the <code>TabItem</code> component",
     "Block5Title": "Close",
     "Block5Intro": "Show the close button to the tab by setting the <code>ShowClose</code> property",
-    "Tips2": "<p><code>Tab</code> component turns on the <code>showClose</code> , <code>TabItem</code> property <code>Closable</code> can be set individually to close tab, <b>defaulting to </b><code>true</code>;In this example <b> User </b> Tabs do not provide a to turn off functionality</p>",
+    "Tips2": "<p><code>Tab</code> component turns on the <code>showClose</code> , <code>TabItem</code> property <code>Closable</code> can be set individually to close tab, <b>defaulting to </b><code>true</code>;In this example <b>User</b>Tabs do not provide a to turn off functionality</p>",
     "Block6Title": "Position",
     "Block6Intro": "By setting the <code>Placement</code> property to change the label position, a small arrow scrolls up and down to <code>TabItem</code> switch when you change to left or right",
     "DividerText": "Split Line",
@@ -727,7 +727,7 @@
     "Block9Div": "Header",
     "Block10Title": "Live Tab components",
     "Block10Intro": "By setting  the <code>ShowExtendButtons</code> property to <code>true</code>, turning on the left and right buttons of the component and closing the drop-down menu, it is very useful in practice",
-    "Tips3": "Dynamically adjust the number of <code>TabItem</code> by  <b> adding </b> , <b> delete </b> buttons  to view the left and right effects beyond the number of containers, <b> user management </b> is set to not close, and the feature button cannot close this tab",
+    "Tips3": "Dynamically adjust the number of <code>TabItem</code> by <b>adding</b>, <b>delete</b>buttons to view the left and right effects beyond the number of containers, <b>user management</b> is set to not close, and the feature button cannot close this tab",
     "Block11Title": "Only the current label is rendered",
     "Block11Intro": "By setting the <code>isOnlyRenderActiveTab</code> parameter, the component renders only the current active label",
     "Att1": "Whether it is a bordered card style",
@@ -861,8 +861,8 @@
     "Block8Title": "Secondary encapsulation button",
     "Block8Intro": "The button display text is set by setting the <code>Text</code> property of the <code>winButton</code> component, and the click button is the text on the right that shows the clicked button",
     "Block9Title": "Asynchronous request button",
-    "Block9Intro": "By setting whether the <code>isAsync</code> property button is <b> asynchronous request button by setting whether the is </b>  <code>false</code> by default",
-    "P3": "When the button is an asynchronous request button, the button is changed to disabled, and the <code>loading</code> small icon is displayed, returning to normal after the asynchronous request ends, in this case, after clicking  <b> the asynchronous request </b> button, the request load animation is displayed and returns to normal after 5 seconds",
+    "Block9Intro": "By setting whether the <code>isAsync</code> property button is <b>asynchronous request button by setting whether the is</b> <code>false</code> by default",
+    "P3": "When the button is an asynchronous request button, the button is changed to disabled, and the <code>loading</code> small icon is displayed, returning to normal after the asynchronous request ends, in this case, after clicking the <b>asynchronous button</b>, the request load animation is displayed and returns to normal after 5 seconds",
     "Button22Text": "Asynchronous",
     "EventDesc1": "This event is triggered when the button is clicked",
     "EventDesc2": "This event is triggered when the button is clicked and the current component is not refreshed for performance improvement",
@@ -1016,7 +1016,7 @@
     "P1": "Set the value of the <code>viewModel</code> property to The <code>DateTime</code> of DatePickerViewModel.DateTime",
     "Block8Title": "Allow empty time",
     "Block8Intro": "More for conditional selection",
-    "P2": "The <b> empty </b> button automatically appears when the binding value is <code>DateTime?</code> for an empty type",
+    "P2": "The <b>empty</b>button automatically appears when the binding value is <code>DateTime?</code> for an empty type",
     "Block9Title": "The label is displayed",
     "Block9Intro": "When you are a form component, the label in front of the component is displayed",
     "P3": "Set the <code>DisplayText</code> property value to <code>select time</code>",
@@ -1027,7 +1027,7 @@
     "Block11Title": "Sidebar with shortcuts",
     "Block11Intro": "When you set the <code>ShowSidebar</code> property value to <code>true</code>, the component displays the shortcut sidebar",
     "Block12Title": "Set the range of values",
-    "Block12Intro": "Set the <code>MinValue</code> property value to the <code>MaxValue</code> limit the range of optional values, in this case setting the range to <b> 45 </b> days",
+    "Block12Intro": "Set the <code>MinValue</code> property value to the <code>MaxValue</code> limit the range of optional values, in this case setting the range to <b>45</b>days",
     "Att1": "Whether to display the front label",
     "Att2": "Whether to display the shortcut sidebar",
     "Att3": "The front label displays text",
@@ -1098,12 +1098,12 @@
     "Li4": "The buttons in the form can be set up multiplely, just set the buttons <code>Buttons</code> template",
     "Block1Title": "Basic usage",
     "Block1Intro": "By binding <code>TModel</code> data model, editable forms for individual fields of the model are automatically generated",
-    "P2": "Directly bind the model <code>model</code>, setting the <b> Education </b> <b>complete </b> field not to appear",
+    "P2": "Directly bind the model <code>model</code>, setting the <b>Education</b><b>complete</b>field not to appear",
     "GroupBox1": "An example of a form",
     "ButtonText": "Submit",
     "Block2Title": "Turn on data validation",
     "Block2Intro": "Data compliance checks are implemented through nested <code>ValidateForm</code> components",
-    "P3": "The component is built into the <code>ValidateForm</code> to turn on data compliance checks, and <b> hobby </b> fields use the <code>EditTemplate</code> template to customize the component to render the data",
+    "P3": "The component is built into the <code>ValidateForm</code> to turn on data compliance checks, and <b>hobby</b>fields use the <code>EditTemplate</code> template to customize the component to render the data",
     "P4": "Make the <code>birthday</code> field read-only by setting the <code>Readonly</code> property",
     "GroupBox2": "An example of a form",
     "Block3Title": "It is not automatically generated by default",
@@ -1328,7 +1328,7 @@
     "Block1Intro": "Multi-select drop-down boxes in a variety of colors are available",
     "Block2Title": "A two-way binding value string",
     "Block2Intro": "Bind a comma string-splitting string",
-    "Div1": "<div>The <code>mutltiSelect</code> component data source <code>Items</code> and <b> selected values</b> the <code>SelectItemsValue</code> support bidirectional binding;In this example, the <code>SelectItemsValue</code> variable by binding bidirectionally, and chooses to change its value through the drop-down box. </div>",
+    "Div1": "<div>The <code>mutltiSelect</code> component data source <code>Items</code> and <b>selected values</b> the <code>SelectItemsValue</code> support bidirectional binding;In this example, the <code>SelectItemsValue</code> variable by binding bidirectionally, and chooses to change its value through the drop-down box. </div>",
     "ButtonText1": "Add",
     "ButtonText2": "Decrease",
     "ButtonText3": "Clear",
@@ -1340,7 +1340,7 @@
     "P2": "In this example, an array variable <code>SelectedIntArrayValues</code>  selected by a bidirectional binding, selects to change its value through a drop-down box",
     "Block5Title": "Bidirectional binding enumerates the collection",
     "Block5Intro": "Bind a generic a collection of <code>IEnumerable<Enum></code>",
-    "P3": "In this example, by binding <code>SelectEnumValues</code> collection variables in both directions, you choose to change their values through the drop-down box, <b> and you do not need to set the <code>Items</code> parameter when enumerating </b> type, the added feature is that the component tries to find resource files or <code>DisplayAttribute</code> And <code>DescriptionAttribute</code> labels attempt local translation, such as this example when switching to <b>Chinese</b> enumerates the values <b> elementary school </b> <b> middle school </b>",
+    "P3": "In this example, by binding <code>SelectEnumValues</code> collection variables in both directions, you choose to change their values through the drop-down box, <b>and you do not need to set the <code>Items</code> parameter when enumerating</b>type, the added feature is that the component tries to find resource files or <code>DisplayAttribute</code> And <code>DescriptionAttribute</code> labels attempt local translation, such as this example when switching to <b>Chinese</b> enumerates the values <b>elementary school</b><b>middle school </b>",
     "Block6Title": "Search function",
     "Block6Intro": "Turn on search by setting the <code>ShowSearch</code> value",
     "P4": "In this example, the search callback delegate method is set <code>onSearchTextChanged</code> to customize search results if the display text is used internally to make a fuzzy match when not set",
@@ -1374,7 +1374,7 @@
     "ButtonText": "Test",
     "Block15Title": "Cascading bindings",
     "Block15Intro": "The second drop-down box dynamically populates the content by selecting the different options for the first drop-down box.",
-    "P10": "In this example, clicking on the first drop-down box allows you to get the data source for the second multi-box by asynchronous means, and after assigning, call <code>StateHasChanged</code> to re-render the <b> multi-box </b>",
+    "P10": "In this example, clicking on the first drop-down box allows you to get the data source for the second multi-box by asynchronous means, and after assigning, call <code>StateHasChanged</code> to re-render the <b>multi-box </b>",
     "Att1": "Whether to display the front label",
     "Att2": "是否显示前置标签关闭按钮",
     "Att3": "Whether to display the function button",
@@ -1408,7 +1408,7 @@
     "Block5Intro": "Make the components vertically arranged internally by setting the <code>IsVertical</code>",
     "Block6Title": "The binding enumeration type",
     "Block6Intro": "You do not need to set up <code>Items</code> <code>Value</code> by binding both directions",
-    "P1": "By setting the <code>IsAutoAddNullItem</code> automatically adds the <b> empty value </b> option, and by setting the <code>NullItemText</code> the custom <b> null </b> option",
+    "P1": "By setting the <code>IsAutoAddNullItem</code> automatically adds the <b>empty value</b>option, and by setting the <code>NullItemText</code> the custom <b>null</b>option",
     "RadioText2": "null",
     "Block7Title": "Color",
     "Block7Intro": "Change the component background color by setting the <code>Color</code> property",
@@ -1447,12 +1447,12 @@
     "H1": "When there are too many options, use the drop-down menu to present and select content",
     "Block1Title": "Select drop-down selection box",
     "Block1Intro": "Drop-down selection boxes are available in a variety of colors",
-    "P1": "In this example, the first drop-down box does not have a <code>Value </code> bidirectional binding, so you only change when you select different options, and the remaining drop-down boxes share the same data source<code>Items </code> and bind <code>Value </code> values in both directions, changing together when you select different options",
+    "P1": "In this example, the first drop-down box does not have a <code>Value</code> bidirectional binding, so you only change when you select different options, and the remaining drop-down boxes share the same data source<code>Items</code> and bind <code>Value</code> values in both directions, changing together when you select different options",
     "Block2Title": "Select disables the drop-down box",
     "Block2Intro": "Selector unavailable state",
-    "P2": "The options in the drop-down box <b> disable the </b> example",
+    "P2": "The options in the drop-down box <b>disable the</b>example",
     "Block3Title": "Select two-way binding",
-    "Block3Intro": "The values in the text box change as you change the drop-down option by binding the <code>Model.Name</code> property to the component with <code>Select </code> .",
+    "Block3Intro": "The values in the text box change as you change the drop-down option by binding the <code>Model.Name</code> property to the component with <code>Select</code> .",
     "Block4Title": "Select cascading binding",
     "Block4Intro": "The second drop-down box dynamically populates the content by selecting the different options for the first drop-down box.",
     "ButtonText1": "In Dialog",
@@ -1469,28 +1469,28 @@
     "Block7Intro": "The component binding value is an example of a Guid structure",
     "Block8Title": "The label is displayed",
     "Block8Intro": "When a component binds in both directions, it automatically determines whether label text is displayed based on the conditions",
-    "P3": "The pre-label explicit rules are consistent with the <code> BootstrapInput </code> component of the  of the <a href='inputs'>[The portal]</a>",
+    "P3": "The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component of the  of the <a href='inputs'>[The portal]</a>",
     "Divider1": "Bidirectional binding displays labels",
     "Divider2": "Bidirectional bindings show that bidirectional bindings do not display labels",
     "Divider3": "Customize DisplayText",
     "SelectText": "Custom city",
     "Block9Title": "Static data",
-    "Block9Intro": "Hard-coded writing directly inside the <code>Select </code> component is suitable for static data drop-down boxes",
+    "Block9Intro": "Hard-coded writing directly inside the <code>Select</code> component is suitable for static data drop-down boxes",
     "Block10Title": "Enumerate the data",
     "Block10Intro": "an example of a type enumerated a <code>select</code> component binding",
-    "P4": "Enumeration When the binding value is an empty enumeration type, the component automatically adds preferences internally through the <code> PlaceHolder </code> value, and when the <code> PlaceHolder </code> value is not set, <b>please select ...  </b> as a preference, and this example binds <code> the EnumEducation </code> enumeration type data",
-    "P5": "Setting <code>PalceHolder </code> is not valid when the binding value is an enumerated type",
+    "P4": "Enumeration When the binding value is an empty enumeration type, the component automatically adds preferences internally through the <code>PlaceHolder</code> value, and when the <code>PlaceHolder</code> value is not set, <b>please select ... </b>as a preference, and this example binds <code>the EnumEducation</code> enumeration type data",
+    "P5": "Setting <code>PalceHolder</code> is not valid when the binding value is an enumerated type",
     "SelectText1": "Can be empty",
     "SelectText2": "Not empty",
     "Block11Title": "The binding can be an empty type",
     "Block11Intro": "<code>an example of the Select</code> component binding <code>int?</code> type",
-    "P6": "When the first option is selected, the binding value <code> SelectIntItem </code> to <code>null </code>",
+    "P6": "When the first option is selected, the binding value <code>SelectIntItem</code> to <code>null</code>",
     "Block12Title": "The binding can be an empty Boolean type",
-    "Block12Intro": "an example of the <code>bool?</code> type of <code> select </code> component binding",
+    "Block12Intro": "an example of the <code>bool?</code> type of <code>select</code> component binding",
     "P7": "Can be used for the empty boolean type more than in the conditional search box",
-    "P8": "When the first option is selected, the binding value <code> SelectIntItem </code> to <code>null </code>",
+    "P8": "When the first option is selected, the binding value <code>SelectIntItem</code> to <code>null</code>",
     "Block13Title": "Custom option templates",
-    "Block13Intro": "By setting the <code>ItemTemplate </code> you can customize the option rendering style",
+    "Block13Intro": "By setting the <code>ItemTemplate</code> you can customize the option rendering style",
     "BlockShowSearchTitle": "Drop-down box with search box",
     "BlockShowSearchIntro": "Controls whether the search box is displayed by setting the <code>ShowSearch</code> property, which is not displayed by default false",
     "Block15Title": "Drop-down box with confirmation",
@@ -1540,32 +1540,32 @@
     "OnText": "On",
     "OffText": "Off",
     "DisableTitle": "Disable the state",
-    "DisableIntro": "Control the unavailable state of the component by setting the <code>IsDisabled </code> property",
+    "DisableIntro": "Control the unavailable state of the component by setting the <code>IsDisabled</code> property",
     "ColorTitle": "Switch color",
-    "ColorIntro": "Set the switch status color by setting the <code> OnColor </code> <code>OffColor </code> property values",
+    "ColorIntro": "Set the switch status color by setting the <code>OnColor</code> <code>OffColor</code> property values",
     "BindingTitle": "Two-way binding",
     "BindingIntro": "Binding variables within a component, data is automatically synchronized",
-    "P2": "when the <code>Switch </code> component turns on bidirectional binding, the <code>DisplayName </code> label value is automatically obtained based on the bound <code> Model </code> property value and appears as a pre-<code>Label </code>, which can be customized to display the pre-label through the <code>DisplayText </code> property, or through the <code> ShowLabel </code> property turns off the display of the prelabel",
-    "P3": "The pre-label explicit rules are consistent with the <code> BootstrapInput </code> component  of the <a href='inputs'>[The portal]</a>",
+    "P2": "when the <code>Switch</code> component turns on bidirectional binding, the <code>DisplayName</code> label value is automatically obtained based on the bound <code>Model</code> property value and appears as a pre-<code>Label</code>, which can be customized to display the pre-label through the <code>DisplayText</code> property, or through the <code>ShowLabel</code> property turns off the display of the prelabel",
+    "P3": "The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component  of the <a href='inputs'>[The portal]</a>",
     "DisplayText1": "An example of a two-way binding",
     "DivText1": "The binding value",
     "DividerText1": "Custom labels",
-    "P4": "Set the <code> DisplayText </code> value to <b> custom label </b>",
+    "P4": "Set the <code>DisplayText</code> value to <b>custom label </b>",
     "DisplayText2": "Custom labels",
     "DividerText2": "Occupants",
-    "P5": "The value of <code> DisplayText </code> is displayed when <code> ShowLabel </code> is <code>true </code>, regardless of whether the value is set",
+    "P5": "The value of <code>DisplayText</code> is displayed when <code>ShowLabel</code> is <code>true</code>, regardless of whether the value is set",
     "DividerText3": "Do not occupy seats",
-    "P6": "The value of <code> DisplayText </code> is not displayed when the <code> ShowLabel </code> is <code>false </code>",
+    "P6": "The value of <code>DisplayText</code> is not displayed when the <code>ShowLabel</code> is <code>false</code>",
     "DisplayText3": "Do not display",
     "InnerTextTitle": "Displays built-in text",
-    "InnerTextIntro": "By setting <code> ShowInnerText </code> property control component displays built-in text",
-    "P7": "By setting the <code> onInnerText </code> <code>OffInnerText </code> property to change the built-in text, a Chinese character is recommended by default to customize the component width to increase the amount of built-in text",
+    "InnerTextIntro": "By setting <code>ShowInnerText</code> property control component displays built-in text",
+    "P7": "By setting the <code>onInnerText</code> <code>OffInnerText</code> property to change the built-in text, a Chinese character is recommended by default to customize the component width to increase the amount of built-in text",
     "LabelText1": "Default text:",
     "LabelText2": "Custom text:",
     "OnInnerText": "Be",
     "OffInnerText": "Not",
     "NullableTitle": "Can be an empty type switch",
-    "NullableIntro": "Control the default value of the <code>Null </code> value by setting the <code> DefaultValueWhenNull </code> property, which is <code>false </code> when not set",
+    "NullableIntro": "Control the default value of the <code>Null</code> value by setting the <code>DefaultValueWhenNull</code> property, which is <code>false</code> when not set",
     "Class": "Style",
     "Height": "Control height",
     "IsDisabled": "Whether to disable it",
@@ -1593,12 +1593,12 @@
     "BasicUsageIntro": "A large amount of text is acceptable",
     "BasicUsageLabel": "Basic usage",
     "DisableTitle": "Disable",
-    "DisableIntro": "When you set the <code>IsDisabled </code> property value to <code>true </code>, the component suppresses input",
+    "DisableIntro": "When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses input",
     "BindValue": "The binding value",
     "ReadonlyTitle": "Readonly",
-    "ReadonlyIntro": "When you set the <code>readonly </code> property, the component prohibits input",
+    "ReadonlyIntro": "When you set the <code>readonly</code> property, the component prohibits input",
     "HeightTitle": "height",
-    "HeightIntro": "When you set the <code>rows </code> property, component initialization displays a fixed row height",
+    "HeightIntro": "When you set the <code>rows</code> property, component initialization displays a fixed row height",
     "BindWayTitle": "Two-way binding",
     "BindWayIntro": "Binding variables within a component, data is automatically synchronized",
     "ShowLabel": "Whether to display the front label",
@@ -1609,7 +1609,7 @@
     "OnText": "On",
     "OffText": "Off",
     "Title": "Toggle",
-    "SubTitle": "The most common switching application is available with a value of <code>true </code> <code>false </code>",
+    "SubTitle": "The most common switching application is available with a value of <code>true</code> <code>false</code>",
     "BasicUsageTitle": "Basic usage",
     "BasicUsageIntro": "Click the button to switch statuses",
     "BasicUsageP": "Click the first switch to output the log with value",
@@ -1617,15 +1617,15 @@
     "DisableIntro": "The switch is not available.",
     "BindToWayTitle": "Bind data in both directions",
     "BindToWayIntro": "Binding variables within a component, data is automatically synchronized",
-    "BindToWayP1": "when the <code>Switch </code> component turns on bidirectional binding, the <code>DisplayName </code> label value is automatically obtained based on the bound <code> Model </code> property value and appears as a <code> pre-Label </code>, which can be customized to display the pre-label through the <code>DispalyText </code> property, or through the <code> ShowLabel </code> property turns off the display of the prelabel",
+    "BindToWayP1": "when the <code>Switch</code> component turns on bidirectional binding, the <code>DisplayName</code> label value is automatically obtained based on the bound <code>Model</code> property value and appears as a <code>pre-Label</code>, which can be customized to display the pre-label through the <code>DispalyText</code> property, or through the <code>ShowLabel</code> property turns off the display of the prelabel",
     "BindToWayDiaspalyText1": "An example of a two-way binding",
     "BindToWayDiv": "The binding value:",
     "CustomLabelText": "Custom labels",
-    "BindToWayP2": "Set the <code> DisplayText </code> value to <b> custom label </b>",
-    "BindToWayP3": "The </code> value of <code> DisplayText is displayed when <code> ShowLabel </code> is <code>true </code>, regardless of whether the value is set",
+    "BindToWayP2": "Set the <code>DisplayText</code> value to <b>custom label </b>",
+    "BindToWayP3": "The</code> value of <code>DisplayText is displayed when <code>ShowLabel</code> is <code>true</code>, regardless of whether the value is set",
     "OccupantsText": "Occupants",
     "NotOccupantsText": "Not Occupants",
-    "BindToWayP4": "The value of <code> DisplayText </code> is not displayed when the <code> ShowLabel </code> is <code>false </code>",
+    "BindToWayP4": "The value of <code>DisplayText</code> is not displayed when the <code>ShowLabel</code> is <code>false</code>",
     "NotDisplayText": "Do not display",
     "Color": "Color",
     "IsDisabled": "Whether to disable it",
@@ -1656,16 +1656,16 @@
     "SearchableIntro": "In cases where there is a lot of data, you can search and filter the data.",
     "BindToWayTitle": "Two-way binding",
     "BindToWayIntro": "When component data changes, the bidirectional binding <code>bind-Value</code> values change synchronously",
-    "BindToWayP1": "<code>Transfer </code> component is a generic component that supports three binding types <code> string </code> <code>IEnumerable&lt;string&gt;</code> <code>IEnumerable&lt;SelectedItem&gt;</code> in this case bidirectional binding The<code> SelectValue </code> type is <code> IEnumerable&lt;SelectedItem&gt; </code>",
+    "BindToWayP1": "<code>Transfer</code> component is a generic component that supports three binding types <code>string</code> <code>IEnumerable&lt;string&gt;</code> <code>IEnumerable&lt;SelectedItem&gt;</code> in this case bidirectional binding The<code>SelectValue</code> type is <code>IEnumerable&lt;SelectedItem&gt;</code>",
     "BindToWayButtonText1": "Add",
     "ClientValidationTitle": "Client Validation",
     "ClientValidationIntro": "When component data changes, the bidirectional binding <code>bind-Value</code> values change synchronously",
-    "ClientValidationP1": "The <code>Transfer</code> component built into the <code>ValidateForm </code> component turns on client authentication, in this case the component bidirectional binding <code> Model.Hobby </code> type is <code> IEnumerable&lt;string&gt; </code>",
+    "ClientValidationP1": "The <code>Transfer</code> component built into the <code>ValidateForm</code> component turns on client authentication, in this case the component bidirectional binding <code>Model.Hobby</code> type is <code>IEnumerable&lt;string&gt;</code>",
     "ClientValidationButtonText": "Submit",
     "DisableTitle": "Disable",
-    "DisableIntro": "When you set the <code>IsDisabled </code> property value to <code>true </code>, the component suppresses input",
+    "DisableIntro": "When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses input",
     "ItemStyleTitle": "Set the Item style",
-    "ItemStyleIntro": "By setting the <code>OnSetItemClass</code> callback method styles options based on the </code> values of <code>SelectedItem",
+    "ItemStyleIntro": "By setting the <code>OnSetItemClass</code> callback method styles options based on the</code> values of <code>SelectedItem",
     "Items": "A collection of component-bound data items",
     "LeftButtonTextAttr": "The left button displays text",
     "LeftPanelTextAttr": "The left panel Header displays text",
@@ -1686,43 +1686,43 @@
     "Title": "Upload",
     "SubTitle": "Upload the file by clicking",
     "BasicUsageTitle": "Basic usage",
-    "BasicUsageIntro": "The <code> InputUpload </code> component is used with other form components to display the file name, select the file and upload it by clicking the <b>browse button</b>, and by setting the <code>ShowRemoveButton </code> parameter, display the <b> delete button</b>, click the delete button to call back <code> onDelete </code> delegate method",
+    "BasicUsageIntro": "The <code>InputUpload</code> component is used with other form components to display the file name, select the file and upload it by clicking the <b>browse button</b>, and by setting the <code>ShowRemoveButton</code> parameter, display the <b>delete button</b>, click the delete button to call back <code>onDelete</code> delegate method",
     "BasicUsageLabelName": "Name:",
     "BasicUsageLabelAdress": "Adress:",
     "BasicUsageLabelPhoto": "Photo:",
     "FormTitle": "FormSettings",
     "FormIntro": "Use the file upload component to constrain the file format within the form",
-    "FormLi1": "Using the <code>ValidateForm </code> form component, custom validation is set by setting the <code>fileValidation </code> label of the model properties to support file <b> extension </b> <b> size </b> validation, in this case with the extension <code>.png .jpg .jpeg</code> and the file size limit to <code>50K </code>",
-    "FormLi2": "After selecting the file and not starting to upload the file, click the <code> submit </code> button to verify that the data is legitimate, and then upload the file <code> OnSubmit </code> callback delegate, noting that the <b> Picture </b> property type is <code> IBrowserFile </code>",
+    "FormLi1": "Using the <code>ValidateForm</code> form component, custom validation is set by setting the <code>fileValidation</code> label of the model properties to support file <b>extension</b><b>size</b>validation, in this case with the extension <code>.png .jpg .jpeg</code> and the file size limit to <code>50K</code>",
+    "FormLi2": "After selecting the file and not starting to upload the file, click the <code>submit</code> button to verify that the data is legitimate, and then upload the file <code>OnSubmit</code> callback delegate, noting that the <b>Picture</b>property type is <code>IBrowserFile</code>",
     "FormButtonText": "Submit",
     "ClickUploadTitle": "Click upload",
-    "ClickUploadIntro": "The <code> ButtonUpload </code> components, classic styles, user click button to pop up the file selection box.",
-    "ClickUploadP1": "Click on the <code> browse button </code> select file upload, in this case set <code>IsMultiple-true</code> multiple-selectable file can be uploaded",
-    "ClickUploadP2": "When you set up <code> IsSingle </code>, you can upload only one image or file",
+    "ClickUploadIntro": "The <code>ButtonUpload</code> components, classic styles, user click button to pop up the file selection box.",
+    "ClickUploadP1": "Click on the <code>browse button</code> select file upload, in this case set <code>IsMultiple-true</code> multiple-selectable file can be uploaded",
+    "ClickUploadP2": "When you set up <code>IsSingle</code>, you can upload only one image or file",
     "UploadedFilesTitle": "A list of files has been uploaded",
-    "UploadedFilesIntro": "Use <code> DefaultFileList </code> to set up uploaded content",
+    "UploadedFilesIntro": "Use <code>DefaultFileList</code> to set up uploaded content",
     "UploadFolderTitle": "Upload a folder",
-    "UploadFolderIntro": "Use <code> DefaultFileList </code> to set up uploaded content",
+    "UploadFolderIntro": "Use <code>DefaultFileList</code> to set up uploaded content",
     "AvatarUploadTitle": "User profile picture upload",
-    "AvatarUploadIntro": "<code> AvatarUpload </code> component, using the <code>OnChange </code> to limit the format and size of images uploaded by users. In this example, only <code>jpg/png/bmp/jpeg/gif </code> five picture formats are allowed",
+    "AvatarUploadIntro": "<code>AvatarUpload</code> component, using the <code>OnChange</code> to limit the format and size of images uploaded by users. In this example, only <code>jpg/png/bmp/jpeg/gif</code> five picture formats are allowed",
     "AvatarUploadP1": "Card form avatar box",
     "AvatarUploadP2": "Round avatar frame",
-    "AvatarUploadP3": "When you set up <code> IsSingle </code>, you can upload only one image or file",
-    "AvatarUploadP4": " <div>The component provides <code>Accept</code> property for upload file filtering, in this case the circular avatar box accepts both GIF and JPEG images, sets the <code> Accept='image/gif, image/jpeg' </code> and can be written as: <code> Accept='image/*' </code> if you don't restrict the format of the image. Whether this property is not secure or should be to file format validation using the <b> server-side authentication </b></div>",
+    "AvatarUploadP3": "When you set up <code>IsSingle</code>, you can upload only one image or file",
+    "AvatarUploadP4": " <div>The component provides <code>Accept</code> property for upload file filtering, in this case the circular avatar box accepts both GIF and JPEG images, sets the <code>Accept='image/gif, image/jpeg'</code> and can be written as: <code>Accept='image/*'</code> if you don't restrict the format of the image. Whether this property is not secure or should be to file format validation using the <b>server-side authentication </b></div>",
     "AvatarUploadP5": "RELATED: <a href='https://www.runoob.com/tags/att-input-accept.html' target='_blank'>[Accept]</a>  < a href='http://www.iana.org/assignments/media-types/media-types.xhtml' target='_blank' >[Media Types]</a>",
-    "AvatarUploadP6": "Set the preview address <code>PrevUrl </code> with the <code> DefaultFileList </code> property",
+    "AvatarUploadP6": "Set the preview address <code>PrevUrl</code> with the <code>DefaultFileList</code> property",
     "AvatarUploadP7": "Verify that an example of using a picture box is used in the form",
     "AvatarUploadButtonText": "Submit",
     "PreCardStyleTitle": "Preview the card style",
-    "PreCardStyleIntro": "<code> CardUpload </code> components and rendered in card-style band preview mode",
-    "PreCardStyleSSR": "<b> SSR mode </b>",
-    "PreCardStyleServerSide": "<code> Server Side </code> mode, you can use the <code>IWebHostEnvironment </code> injection service to get to the <code> wwwroot </code> directory and save the file to the <code>images/uploader </code>, which does not require a direct call the controller secondary of <b>  MVC </b> <code> SaveToFile </code> method",
-    "PreCardStyleWasm": "<b> Wasm mode </b>",
-    "PreCardStyleWasmSide": "It wasn't available in <code> wasm </code> mode, <code> IWebHostEnvironment </code> needed to save files to the server side by calling <code> webapi </code> interface, and so on",
-    "PreCardStyleLink": "Interested students can view their knowledge of <code> Upload </code> components through the <code> wiki </code> in the open source repository related resources of the <a href='{0}' target='_blank'>[The portal]</a>",
-    "PreCardStyleValidation": "In this example, server-side verification prompts the file for too much prompt when the file size exceeds <code>200MB </code>",
-    "PreCardStyleP1": "In this example, the <code> ShowProgress=true </code> display upload progress bar",
-    "PreCardStyleP2": "When you set up <code> IsSingle </code>, you can upload only one image or file",
+    "PreCardStyleIntro": "<code>CardUpload</code> components and rendered in card-style band preview mode",
+    "PreCardStyleSSR": "<b>SSR mode </b>",
+    "PreCardStyleServerSide": "<code>Server Side</code> mode, you can use the <code>IWebHostEnvironment</code> injection service to get to the <code>wwwroot</code> directory and save the file to the <code>images/uploader</code>, which does not require a direct call the controller secondary of <b> MVC</b><code>SaveToFile</code> method",
+    "PreCardStyleWasm": "<b>Wasm mode </b>",
+    "PreCardStyleWasmSide": "It wasn't available in <code>wasm</code> mode, <code>IWebHostEnvironment</code> needed to save files to the server side by calling <code>webapi</code> interface, and so on",
+    "PreCardStyleLink": "Interested students can view their knowledge of <code>Upload</code> components through the <code>wiki</code> in the open source repository related resources of the <a href='{0}' target='_blank'>[The portal]</a>",
+    "PreCardStyleValidation": "In this example, server-side verification prompts the file for too much prompt when the file size exceeds <code>200MB</code>",
+    "PreCardStyleP1": "In this example, the <code>ShowProgress=true</code> display upload progress bar",
+    "PreCardStyleP2": "When you set up <code>IsSingle</code>, you can upload only one image or file",
     "FileIconTitle": "The file icon",
     "FileIconIntro": "Icons are displayed in different file formats",
     "Base64FormatTitle": "Base64 format",
@@ -1769,20 +1769,21 @@
     "Title": "ValidateForm",
     "SubTitle": "Form components that can be used for data compliance checks",
     "BasicUsageTitle": "Basic usage",
-    "BasicUsageIntro": "Data compliance checks are automatically performed when components placed in the <code>ValidateForm </code> are submitted",
-    "BasicUsageP1": "Component description:",
-    "BasicUsageLi1": "<code> ValidateForm </code> component supports asynchronous setting of <code> Model </code> values",
-    "BasicUsageLi2": "The form event is for <code> OnValidSubmit </code> <code>OnInvalidSubmit</code>",
-    "BasicUsageLi3": "<code> Model </code> parameter is required is not allowed to be empty",
-    "BasicUsageLi4": "Multiple buttons can be placed within the form to set whether the <code> ButtonType='ButtonType.Submit'</code> parameter is submitted to the form",
-    "BasicUsageLi5": "The client authentication mechanism supports the model's <code>Required </code> label, setting the default English prompt information when not set by setting the <code> ErrorMessage </code> parameter prompt",
-    "BasicUsageLi6": "The form checks by default whether the binding field values within the form are legitimate, and you can set the <code> ValidateAllProperties </code> property value to <code> true </code> if you need to check all fields in the model",
-    "BasicUsageLi7": "Set the asynchronous submission form by setting the value of the Button <code> Button </code> property <code> IsAsync </code>",
-    "BasicUsageLi8": "Components within a form are typically used to bind the property values of <code> Model </code> in both directions using bidirectional binding techniques, causing the component to refresh and re-render when its value changes <code> StateHasChanged </code>, and the method is called, i.e. its component or page is refreshed and re-rendered",
+    "BasicUsageIntro": "Data compliance checks are automatically performed when components placed in the <code>ValidateForm</code> are submitted",
+    "BasicUsageP1": "Introduction",
+    "BasicUsageLi1": "<code>ValidateForm</code> component supports asynchronous setting of <code>Model</code> values",
+    "BasicUsageLi2": "The form event is for <code>OnValidSubmit</code> <code>OnInvalidSubmit</code>",
+    "BasicUsageLi3": "<code>Model</code> parameter is required is not allowed to be empty",
+    "BasicUsageLi4": "Multiple buttons can be placed within the form to set whether the <code>ButtonType='ButtonType.Submit'</code> parameter is submitted to the form",
+    "BasicUsageLi5": "The client authentication mechanism supports the model's <code>Required</code> label, setting the default English prompt information when not set by setting the <code>ErrorMessage</code> parameter prompt",
+    "BasicUsageLi6": "The form checks by default whether the binding field values within the form are legitimate, and you can set the <code>ValidateAllProperties</code> property value to <code>true</code> if you need to check all fields in the model",
+    "BasicUsageLi7": "Set the asynchronous submission form by setting the value of the Button <code>Button</code> property <code>IsAsync</code>",
+    "BasicUsageLi8": "Components within a form are typically used to bind the property values of <code>Model</code> in both directions using bidirectional binding techniques, causing the component to refresh and re-render when its value changes <code>StateHasChanged</code>, and the method is called, i.e. its component or page is refreshed and re-rendered",
     "BasicUsageLi9": "After the value of the component control in the form is modified, the <code>OnFieldChanged</code> method is called",
+    "FormLabelWidth": "The default width of component front label is <code>120px</code>. If you need more, please change the style variable <code>--bs-row-label-width</code> in the project style file",
     "BasicUsageP2": "Note:",
     "InnerComponentTitle": "Built-in components",
-    "InnerComponentIntro": "Place the support form components into the <code>ValidateForm </code>",
+    "InnerComponentIntro": "Place the support form components into the <code>ValidateForm</code>",
     "InnerComponentLabel": "Examples of components that support form validation",
     "InnerComponentP1": "Example illustration",
     "InnerComponentLi1": "The name is the string type",
@@ -1790,26 +1791,26 @@
     "InnerComponentLi3": "Birthday is the datetime type",
     "InnerComponentLi4": "Education is an enumeration type",
     "InnerComponentLi5": "Hobbies are collection types",
-    "InnerComponentP2": "In this example, by setting the <b> submit button </b> property <code> IsAsync </code> to submit the form asynchronously, click Submit to disable itself, and resume after the asynchronous operation is complete",
+    "InnerComponentP2": "In this example, by setting the <b>submit button</b>property <code>IsAsync</code> to submit the form asynchronously, click Submit to disable itself, and resume after the asynchronous operation is complete",
     "CustomDisplsyErrorTitle": "Custom displays error messages",
-    "CustomDisplsyErrorIntro": "Set the custom error message by calling <code> SetError </code> method",
-    "CustomDisplsyErrorP1": "<b> scenario </b>, <div> the client verification after the pass of the database save operation, if other problems, you can still make a form custom error prompt, in this case, after the data verification is legal, click the <code> submit form </code> button, the name field will show, <code> the database already exists </code> such a custom prompt </div>",
+    "CustomDisplsyErrorIntro": "Set the custom error message by calling <code>SetError</code> method",
+    "CustomDisplsyErrorP1": "<b>Scenario</b><p>the client verification after the pass of the database save operation, if other problems, you can still make a form custom error prompt, in this case, after the data verification is legal, click the <code>submit form</code> button, the name field will show, <code>the database already exists</code> such a custom prompt</p>",
     "ValidatorAllFieldTitle": "Validate all field values",
-    "ValidatorAllFieldIntro": "This component checks the model binding field values within the form by default, setting the <code> ValidateAllProperties </code> values if you need to check all field values for the model",
-    "ValidatorAllFieldP1": "The <code>Address </code> is not placed in this example, because the <code>ValidateAllProperties </code> parameter value is <code>true </code>, the <code> Addres </code> field is still checked, and <code> OnInvalidSubmit </code> is triggered when the data is submitted after all the data in the timely form is legitimate callback delegate",
+    "ValidatorAllFieldIntro": "This component checks the model binding field values within the form by default, setting the <code>ValidateAllProperties</code> values if you need to check all field values for the model",
+    "ValidatorAllFieldP1": "The <code>Address</code> is not placed in this example, because the <code>ValidateAllProperties</code> parameter value is <code>true</code>, the <code>Addres</code> field is still checked, and <code>OnInvalidSubmit</code> is triggered when the data is submitted after all the data in the timely form is legitimate callback delegate",
     "ComplexValidationTitle": "Complex type support",
     "ComplexValidationIntro": "Supports any complex type of binding and validation",
-    "ComplexValidationP1": "The second binding in this example is a super-complex type <code>ComplexModel.Dummy.Dummy2.Name</code> Empty the value, click <b> submit the form </b> validate the data. After the second text box verifies compliance, the error prompt is displayed again by calling the <code> SetError </code>",
+    "ComplexValidationP1": "The second binding in this example is a super-complex type <code>ComplexModel.Dummy.Dummy2.Name</code> Empty the value, click <b>submit the form</b>validate the data. After the second text box verifies compliance, the error prompt is displayed again by calling the <code>SetError</code>",
     "ComplexValidationPre": "ComplexForm.SetError('Dummy.Dummy2.Name','数据库中已存在');",
     "DynamicFormTitle": "Dynamically adjust the components within the form",
     "DynamicFormIntro": "By changing the components within the form, verify that the form can still be validated correctly",
-    "DynamicFormP1": "Click the <b> Change component </b> button <code> address</code> The component changes to <code> count </code> components, <b> reset component </b> button recovery, <code> name</code> <code> address</code> component is required, <code> count </code> The component has a default value of <code>0</code> So you can check through the data",
+    "DynamicFormP1": "Click the <b>Change component</b>button <code>address</code> The component changes to <code>count</code> components, <b>reset component</b>button recovery, <code>name</code> <code>address</code> component is required, <code>count</code> The component has a default value of <code>0</code> So you can check through the data",
     "InnerFormLabelTitle": "Set the component label right alignment within the form",
     "InnerFormLabelIntro": "Set the alignment of labels throughout the station or in a specific form with style uniformity",
-    "InnerFormLabelP1": "Address text box adds <b> email address </b> validation rules",
+    "InnerFormLabelP1": "Address text box adds <b>email address</b>validation rules",
     "CustomValidationFormTitle": "Customize the verification form",
     "CustomValidationFormIntro": "Add custom validation rules by setting <code>Rules</code>",
-    "CustomValidationFormP1": "Address text box adds <b> email address </b> verification rules, click On Submission to verify",
+    "CustomValidationFormP1": "Address text box adds <b>email address</b>verification rules, click On Submission to verify",
     "CustomValidationFormComment1": "Add mailbox validation rules",
     "CustomValidationFormComment2": "Used in Razor files",
     "Model": "Form component-bound data model, required properties",
@@ -1831,14 +1832,14 @@
     "Title": "Avatar",
     "SubTitle": "Present user or thing information as icons, pictures, or characters.",
     "BasicUsageTitle": "Basic usage",
-    "BasicUsageIntro": "Set the shape and size of your avatar <code> is </code> and <code>Size </code>.",
+    "BasicUsageIntro": "Set the shape and size of your avatar <code>is</code> and <code>Size</code>.",
     "BasicUsageDivider": "Split the line",
     "IconTitle": "The type of presentation",
     "IconIntro": "Three types are supported: icons, pictures, and characters",
     "BorderTitle": "Border",
-    "BorderIntro": "By setting the <code> IsBorder </code> whether to display the avatar border, the border in this mode when the picture fails to load is <code>border-danger</code> style, and when the load is successful, the border is <code>border-success</code>; The borders in the remaining modes are <code>border-info </code>",
+    "BorderIntro": "By setting the <code>IsBorder</code> whether to display the avatar border, the border in this mode when the picture fails to load is <code>border-danger</code> style, and when the load is successful, the border is <code>border-success</code>; The borders in the remaining modes are <code>border-info</code>",
     "BorderDiv1": "The first fillet square avatar box is loaded correctly, so the border is <b class='text-info' > blue </b>",
-    "BorderDiv2": "The second circular avatar loads the picture path incorrectly, so the border is <b class='text-danger'> red </b> and the picture appears as the default icon",
+    "BorderDiv2": "The second circular avatar loads the picture path incorrectly, so the border is <b class='text-danger'> red</b>and the picture appears as the default icon",
     "CircletTitle": "Asynchronous loading",
     "CircleIntro": "Suitable for scenarios where the picture address is obtained asynchronously by interfaces such as <code>webapi</code>",
     "Size": "The size of the avatar box",
@@ -1857,7 +1858,7 @@
     "BasicusageTitle": "Basic usage",
     "BasicusageIntro": "Small badge assembly in a variety of colors is available",
     "PillTitle": "Capsule badge",
-    "PillIntro": "Set the badge pendant with the  of the property <code> IsPill='true'</code> to set the fillet",
+    "PillIntro": "Set the badge pendant with the  of the property <code>IsPill='true'</code> to set the fillet",
     "ButtonTitle": "The badge inside the button",
     "ButtonIntro": "Button internal badge",
     "ButtonSpan": "The primary button",
@@ -1870,9 +1871,9 @@
     "Title": "BarcodeReader",
     "SubTitle": "This component scans the bar code by calling the camera to obtain the bar code content bar code/QR code",
     "Attention": "Pay special attention to:",
-    "Li1": "The site wants to enable <code> https </code>, which is required by browser vendors",
-    "Li2": "The mobile iOS system must use the <code> Safari </code> browser to switch the front/rear camera keys to turn off the function button",
-    "Li3": "The high probability of Android phones requiring native system browsers, <code> Chrome </code> is certain to be possible, and some browsers may not be compatible with cameras",
+    "Li1": "The site wants to enable <code>https</code>, which is required by browser vendors",
+    "Li2": "The mobile iOS system must use the <code>Safari</code> browser to switch the front/rear camera keys to turn off the function button",
+    "Li3": "The high probability of Android phones requiring native system browsers, <code>Chrome</code> is certain to be possible, and some browsers may not be compatible with cameras",
     "Li4": "The bar code recognition rate is related to the pixel, bar code size and mobile phone execution efficiency",
     "BasicUsageTitle": "Basic usage",
     "BasicUsageIntro": "The code is identified by the camera",
@@ -1886,7 +1887,7 @@
     "ImageLi2": "Select a picture that contains barcodes",
     "ImageLi3": "Start recognizing barcodes",
     "AutoStartTitle": "Start automatically",
-    "AutoStartIntro": "Turn on the camera automatically by setting the <code> AutoStart </code> parameter settings",
+    "AutoStartIntro": "Turn on the camera automatically by setting the <code>AutoStart</code> parameter settings",
     "AutoStartLi1": "Click the code to pop up the selection file box",
     "AutoStartLi2": "Select a picture that contains barcodes",
     "AutoStartLi3": "Start recognizing barcodes",
@@ -1921,23 +1922,23 @@
     "Title": "Block",
     "SubTitle": "Depending on the parameter conditions, the contents of the block are determined to be displayed, usually in conjunction with permission authorization",
     "BasicUsageTitle": "Common usage",
-    "BasicUsageIntro": "Determines whether component content is displayed by setting the <code>OnQueryCondition </code> callback method return value",
+    "BasicUsageIntro": "Determines whether component content is displayed by setting the <code>OnQueryCondition</code> callback method return value",
     "TemplateTitle": "Template",
-    "TemplateIntro": "By setting <code>authorized </code> <code> NotAuthorized </code> you can set what appears when you meet and do not meet the criteria, respectively",
-    "TemplateDiv1": "I am the component content that  displayed in <b> accordance </b> with the criteria",
-    "TemplateDiv2": "I am the component content that  displayed that <b> not accordance </b> the  criteria",
+    "TemplateIntro": "By setting <code>authorized</code> <code>NotAuthorized</code> you can set what appears when you meet and do not meet the criteria, respectively",
+    "TemplateDiv1": "I am the component content that  displayed in <b>accordance</b>with the criteria",
+    "TemplateDiv2": "I am the component content that  displayed that <b>not accordance</b>the  criteria",
     "AuthorizateTitle": "Judging by permissions",
-    "AuthorizateIntro": "This example simulates a user logging in to control whether the content <code> Block </code> is displayed, which is easier to use than <code> AuthorizeView </code>",
-    "AuthorizateDiv1": "I am the contents of the component of the <code> CondtionBlock </code>, and the current logged-in user: <code>{0}</code>",
-    "AuthorizateDiv2": "I am the contents of the <code> AuthorizeView </code> component and the current logged-in user: <code>{0}</code>",
-    "AuthorizateDiv3": "I am the contents of the <code> AuthorizeView </code> component and are not currently logged in",
+    "AuthorizateIntro": "This example simulates a user logging in to control whether the content <code>Block</code> is displayed, which is easier to use than <code>AuthorizeView</code>",
+    "AuthorizateDiv1": "I am the contents of the component of the <code>CondtionBlock</code>, and the current logged-in user: <code>{0}</code>",
+    "AuthorizateDiv2": "I am the contents of the <code>AuthorizeView</code> component and the current logged-in user: <code>{0}</code>",
+    "AuthorizateDiv3": "I am the contents of the <code>AuthorizeView</code> component and are not currently logged in",
     "UsersTitle": "Pre-set the user",
     "UsersIntro": "By setting <code>Users</code> controls the display, which is displayed when the currently logged-in user is a preset user",
     "UsersDiv1": "The current user <code>{0}</code> allows you to see this content",
     "RolesTitle": "Preset roles",
-    "RolesIntro": "By setting <code> Roles </code> controls the display, which is displayed when the currently logged-in user is in a preset role",
-    "RolesDiv1": "The current role <code> User </code> allow this content to be seen",
-    "Tips": "By setting different <code> Name </code> as a resource, combined with the authorization system to authorize this resource can be achieved to any element of the Web page permission control",
+    "RolesIntro": "By setting <code>Roles</code> controls the display, which is displayed when the currently logged-in user is in a preset role",
+    "RolesDiv1": "The current role <code>User</code> allow this content to be seen",
+    "Tips": "By setting different <code>Name</code> as a resource, combined with the authorization system to authorize this resource can be achieved to any element of the Web page permission control",
     "OnQueryCondition": "Whether to display this Block",
     "ChildContent": "The content is displayed within the Block block",
     "Authorized": "The contents of the block block are displayed in a compliant condition",
@@ -1955,7 +1956,7 @@
     "FooterTitle": "Header 和 Footer",
     "FooterIntro": "You can show the content by adding the CardHeader and CardFooter elements",
     "ColorTitle": "A card with a border color",
-    "ColorIntro": "By setting, <code> The </code> makes the border and Body color appropriate",
+    "ColorIntro": "By setting, <code>The</code> makes the border and Body color appropriate",
     "CollapsibleTitle": "Collapsible",
     "CollapsibleIntro": "Card body can collapse/expand by set <code>IsCollapsible</code> to true",
     "CollapsibleBody": "Click card hader for collapse/expand card body",
@@ -1979,10 +1980,10 @@
     "BindTitle": "Data is bound in both directions",
     "BindIntro": "The calendar box automatically updates the text box when the time is selected",
     "ViewModelTitle": "Show by week",
-    "ViewModelIntro": "By setting the property <code> CalendarViewModel.Week </code>",
+    "ViewModelIntro": "By setting the property <code>CalendarViewModel.Week</code>",
     "AppTitle": "Practical applications",
     "AppIntro": "Curriculum",
-    "AppText": "Currently, the <code>ChildContext </code> is temporarily rendered by the week component, and the data-related operating components in all cells are not encapsulated and will be refined later",
+    "AppText": "Currently, the <code>ChildContext</code> is temporarily rendered by the week component, and the data-related operating components in all cells are not encapsulated and will be refined later",
     "None": "None",
     "Chinese": "Chinese",
     "Math": "Math",
@@ -2035,9 +2036,9 @@
     "BasicUsageTitle": "Basic usage",
     "BasicUsageIntro": "Simple human-machine identification",
     "ImageTitle": "Specify the path and name of the graph bed",
-    "ImageIntro": "Set the map bed path <code> ImagesPath</code>, the picture name by <code> ImagesName </code>, and the background by calculating the full path name of the stitched random picture",
+    "ImageIntro": "Set the map bed path <code>ImagesPath</code>, the picture name by <code>ImagesName</code>, and the background by calculating the full path name of the stitched random picture",
     "ImageCallbackTitle": "Specify the graph bed delegate method",
-    "ImageCallbackIntro": "Set a custom method to stitch the full path name of a random picture by <code> GetImageName </code>",
+    "ImageCallbackIntro": "Set a custom method to stitch the full path name of a random picture by <code>GetImageName</code>",
     "ImagesPath": "Figure the path of the bed",
     "ImagesName": "The name of the slider background file",
     "HeaderText": "Component Header displays text",
@@ -2060,11 +2061,11 @@
     "Title": "Carousel",
     "SubTitle": "In limited space, loop through the same type of pictures, text, and more",
     "BasicUsageTitle": "Basic usage",
-    "BasicUsageIntro": "A wide range of basic usages are used to bind components to an array of picture paths by setting the <code>Items </code> property values",
+    "BasicUsageIntro": "A wide range of basic usages are used to bind components to an array of picture paths by setting the <code>Items</code> property values",
     "FadeTitle": "Fade in and out",
-    "FadeIntro": "By setting the <code> IsFade </code> property, the picture switches with a fade-in and fade-out effect",
+    "FadeIntro": "By setting the <code>IsFade</code> property, the picture switches with a fade-in and fade-out effect",
     "OnClickTitle": "Click on the image to call back the event",
-    "OnClickIntro": "After you set the <code> OnClick </code> property by setting, click <code> Image </code> to trigger the <code>OnClick </code> callback delegate",
+    "OnClickIntro": "After you set the <code>OnClick</code> property by setting, click <code>Image</code> to trigger the <code>OnClick</code> callback delegate",
     "Images": "Images collection",
     "IsFade": "Whether to fade in and out",
     "Width": "Set the width of the picture",
@@ -2095,13 +2096,13 @@
     "Li1": "Displays the percentage of progress for a task",
     "Li2": "Count the proportion of certain indicators.",
     "BasicUsageTitle": "Basic usage",
-    "BasicUsageIntro": "Set the circular progress by setting the <code>Value </code> property",
+    "BasicUsageIntro": "Set the circular progress by setting the <code>Value</code> property",
     "IncreaseSpan": "Increase",
     "DecreaseSpan": "Decrease",
     "ColorTitle": "Color",
-    "ColorIntro": "Set the color of the circular progress bar by setting the <code>Color </code> property",
+    "ColorIntro": "Set the color of the circular progress bar by setting the <code>Color</code> property",
     "StrokeWidthTitle": "The width of the progress bar",
-    "StrokeWidthIntro": "Set the width of the circular progress bar by setting the <code>StrokeWidth </code> property",
+    "StrokeWidthIntro": "Set the width of the circular progress bar by setting the <code>StrokeWidth</code> property",
     "ChildContentTitle": "Customize the display",
     "ChildContentIntro": "Customize the display content with custom subcomponents",
     "ChildContentP1": "The size of the consumer population",
@@ -2123,7 +2124,7 @@
     "ColorTitle": "The child title color",
     "ColorIntro": "Each panel sets a different color",
     "ItemsTitle": "Dynamic updates",
-    "ItemsIntro": "The </code> template <code> CollapseItems is set by conditional logic",
+    "ItemsIntro": "The</code> template <code>CollapseItems is set by conditional logic",
     "Consistency": "Consistency",
     "ConsistencyItem1": "Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;",
     "ConsistencyItem2": "Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.",
@@ -2149,24 +2150,24 @@
     "BasicUsage": "Basic usage",
     "BindWayTitle": "Bind data in both directions",
     "BindWayIntro": "Two-way binding automatically gets the display labels in the resource file",
-    "BindWayP1": "When the <code> Dispaly </code> components turn on bidirectional binding, the <code>Display/DisplayName</code> label value is automatically obtained based on the <code> Model </code> property value of the binding and appears as a <code>pre-Label</code>, with <code>DisplayText</code> properties you can customize the display of the pre-label, or by turning off the display of the pre-label through the <code>ShowLabel</code> property",
+    "BindWayP1": "When the <code>Dispaly</code> components turn on bidirectional binding, the <code>Display/DisplayName</code> label value is automatically obtained based on the <code>Model</code> property value of the binding and appears as a <code>pre-Label</code>, with <code>DisplayText</code> properties you can customize the display of the pre-label, or by turning off the display of the pre-label through the <code>ShowLabel</code> property",
     "BindWayCustomLabel": "Custom labels",
-    "BindWayP2": "Set the <code> DisplayText </code> value to <b> custom label </b>",
+    "BindWayP2": "Set the <code>DisplayText</code> value to <b>custom label </b>",
     "BindWayOccupants": "Occupants",
-    "BindWayP3": "The value of <code> DisplayText </code> is displayed when <code> ShowLabel </code> is <code>true </code>, regardless of whether the value is set",
+    "BindWayP3": "The value of <code>DisplayText</code> is displayed when <code>ShowLabel</code> is <code>true</code>, regardless of whether the value is set",
     "BindWayNotccupants": "Do not occupy seats",
-    "BindWayP4": "The value of <code> DisplayText </code> is not displayed when the <code> ShowLabel </code> is <code>false </code>",
+    "BindWayP4": "The value of <code>DisplayText</code> is not displayed when the <code>ShowLabel</code> is <code>false</code>",
     "DataTypeTitle": "Generic binding",
-    "DataTypeIntro": "The <code> Display </code> component has built-in processing of <code> enumerated </code> <code> collections </code> <code> array </code>, customize formatting or callback delegate methods if they do not meet the criteria",
+    "DataTypeIntro": "The <code>Display</code> component has built-in processing of <code>enumerated</code> <code>collections</code> <code>array</code>, customize formatting or callback delegate methods if they do not meet the criteria",
     "EditorFormTitle": "Used within the form",
-    "EditorFormIntro": "The <code> Dispaly </code> component is used in form components <code> EditorForm </code>, and is used in detail pages and is not editable",
+    "EditorFormIntro": "The <code>Dispaly</code> component is used in form components <code>EditorForm</code>, and is used in detail pages and is not editable",
     "FormatStringTitle": "Custom format",
-    "FormatStringIntro": "When you set the <code>FormatString </code> property value to <code>yyyy-MM-dd </code>, the component displays a time format of the year and day",
+    "FormatStringIntro": "When you set the <code>FormatString</code> property value to <code>yyyy-MM-dd</code>, the component displays a time format of the year and day",
     "FormatStringettingText": "Set up",
-    "FormatStringP": "The <code> Dispaly </code> component binding <code> byte[] </code> array, formatted as an example of <code> base64 </code> encoded string",
+    "FormatStringP": "The <code>Dispaly</code> component binding <code>byte[]</code> array, formatted as an example of <code>base64</code> encoded string",
     "LookupTitle": "Automatically translated into Text",
-    "LookupIntro": "Set the <code>Lookup </code> value to <code>IEnumerable&lt;SelectedItem&gt;</code> collection, through which the component will perform translations through the <code>Value </code> display <code>Text </code>",
-    "LookupP1": "In this example, the component <code>Value='@@IntValue'</code> set <code>Lookup='@@IntValueSource'</code> component to display the <code>Text </code> corresponding to the value of the </code> <code> Value",
+    "LookupIntro": "Set the <code>Lookup</code> value to <code>IEnumerable&lt;SelectedItem&gt;</code> collection, through which the component will perform translations through the <code>Value</code> display <code>Text</code>",
+    "LookupP1": "In this example, the component <code>Value='@@IntValue'</code> set <code>Lookup='@@IntValueSource'</code> component to display the <code>Text</code> corresponding to the value of the</code> <code>Value",
     "ShowLabel": "Whether to display the front label",
     "DisplayText": "The front label displays text",
     "FormatString": "The numerically formatted string",
@@ -2181,7 +2182,7 @@
     "Title": "DropdownWidget",
     "SubTitle": "More for head information summary presentation",
     "BasicUsageTitle": "Basic usage",
-    "BasicUsageIntro": "Write pendant content directly on the page through <code>childContent </code>",
+    "BasicUsageIntro": "Write pendant content directly on the page through <code>childContent</code>",
     "BasicUsageMessage": "You have 4 unread messages",
     "BasicUsageViewMessage": "View all messages",
     "BasicUsageNotify": "You have 10 unread notifications",
@@ -2203,12 +2204,12 @@
     "Title": "Empty",
     "SubTitle": "Sub Title PlaceHolder",
     "BasicUsageTitle": "Basic usage",
-    "BasicUsageIntro": "Just add <code> Empty </code> tag",
+    "BasicUsageIntro": "Just add <code>Empty</code> tag",
     "ImageTitle": "Set the path to the empty state picture",
-    "ImageIntro": "Just set the <code>Image </code> property",
+    "ImageIntro": "Just set the <code>Image</code> property",
     "ImageText": "No data at this time",
     "TemplateTitle": "Customize the empty state template",
-    "TemplateIntro": "The inner set renders custom components <code> Template </code> labels",
+    "TemplateIntro": "The inner set renders custom components <code>Template</code> labels",
     "TemplateIButtonText": "Go back to the previous page",
     "Image": "Customize the picture path",
     "Text": "Custom description information",
@@ -2222,10 +2223,10 @@
     "Title": "GroupBox",
     "SubTitle": "Simulate WinForm's GroupBox components",
     "BasicUsageTitle": "Basic usage",
-    "BasicUsageIntro": "Put your own components inside the <code> GroupBox </code>",
+    "BasicUsageIntro": "Put your own components inside the <code>GroupBox</code>",
     "GroupTitle": "An example of a form",
-    "GroupP1": "I'm an example of <code> GroupBox </code>",
-    "GroupP2": "For more examples, please refer to the <code> EditorForms </code> Form Example < a href'editorforms' target'_blank'> the portal </a>",
+    "GroupP1": "I'm an example of <code>GroupBox</code>",
+    "GroupP2": "For more examples, please refer to the <code>EditorForms</code> Form Example < a href'editorforms' target'_blank'> the portal </a>",
     "AttTitle": "Set the component title"
   },
   "BootstrapBlazor.Shared.Samples.LinkButtons": {
@@ -2259,12 +2260,12 @@
     "SubTitle": "Provides rule arrangement controls",
     "BasicUsageTitle": "Basic usage",
     "BasicUsageIntro": "Apply to a large number of duplicate data implementation rule arrangements",
-    "BasicUsageP1": "The <code> OnListViewItemClick </code> event is triggered when you click on the image",
+    "BasicUsageP1": "The <code>OnListViewItemClick</code> event is triggered when you click on the image",
     "ProductListText": "The list of products",
     "PaginationTitle": "Paginated display",
-    "PaginationIntro": "Set the <code> Pageable </code> display paginated components",
+    "PaginationIntro": "Set the <code>Pageable</code> display paginated components",
     "GroupTitle": "Group display",
-    "GroupIntro": "Set up grouping <code> GroupName </code> data",
+    "GroupIntro": "Set up grouping <code>GroupName</code> data",
     "Items": "Component data source",
     "Pageable": "Whether to paginated",
     "PageItemsSource": "The quantity data source is displayed per page",
@@ -2281,10 +2282,10 @@
     "BasicUsageTitle": "Basic usage",
     "BasicUsageIntro": "The injection service displays client geographic location information",
     "BasicUsageP1": "Introduction to usage",
-    "BasicUsageP2": "The component uses the injection service <code> IIPLocatorProvider </code> call the <code>Locate </code> method",
-    "BasicUsageP3": "Because the geo-location query interface returns character sets that may be other character sets such as <code> gbk </code>, the program will report an error;",
+    "BasicUsageP2": "The component uses the injection service <code>IIPLocatorProvider</code> call the <code>Locate</code> method",
+    "BasicUsageP3": "Because the geo-location query interface returns character sets that may be other character sets such as <code>gbk</code>, the program will report an error;",
     "BasicUsageP4": "Solution:",
-    "BasicUsageP5": "The <code> Startup </code> file add the following phrase to the  <code> ConfigureServices </code> method",
+    "BasicUsageP5": "The <code>Startup</code> file add the following phrase to the  <code>ConfigureServices</code> method",
     "BasicUsageP6": "IP test data",
     "BasicUsageP7": "Jinan City, Shandong Province Unicom",
     "BasicUsageP8": "Hefei, Anhui Province, telecommunications",
@@ -2294,7 +2295,7 @@
     "BasicUsageP9": "Extend the custom geo-location query interface",
     "BasicUsageP10": "1. Implement a custom locator",
     "BasicUsageP11": "2. Configure a custom locator",
-    "BasicUsageP12": "Customize the locator <code> CustomerLocator </code> configuration with the callback delegate parameters the <code> AddBootstrapBlazor </code> method"
+    "BasicUsageP12": "Customize the locator <code>CustomerLocator</code> configuration with the callback delegate parameters the <code>AddBootstrapBlazor</code> method"
   },
   "BootstrapBlazor.Shared.Samples.Ips": {
     "BasicUsageTitle": "Basic usage"
@@ -2302,17 +2303,17 @@
   "BootstrapBlazor.Shared.Samples.Prints": {
     "Title": "Print",
     "SubTitle": "Used to print a document or a local view",
-    "Tips1": "Set up <code style='margin-left: 14px;' > PreviewUrl </code>, open a new page for print preview and click the print button on this page for page printing",
-    "Tips2": "If you are printing a button in the <code>Dialog </code> component when you do not set the <code>PreviewUrl </code>, the pop-up contents are printed",
+    "Tips1": "Set up <code style='margin-left: 14px;' > PreviewUrl</code>, open a new page for print preview and click the print button on this page for page printing",
+    "Tips2": "If you are printing a button in the <code>Dialog</code> component when you do not set the <code>PreviewUrl</code>, the pop-up contents are printed",
     "PreButtonText": "Print",
     "PrintButtonTitle": "Basic usage",
     "PrintButtonIntro": "Print the page by clicking the print button",
     "PrintP1": "After clicking the print button below, a new page pops up for print preview, confirms that it is correct, and then clicks the print button in the print preview page for printer selection",
     "PrintDialogTitle": "Print the bullet window",
-    "PrintDialogIntro": "Turn on printing by setting up the <code> ShowPrint </code>",
-    "PrintDialogP": "In this example, the pop-up window content is a custom component <code>{0}</code> the <code>Footer </code> where the button itself is located is hidden, so the <code>Print </code> button built into the pop-up window cannot be displayed, and setting the <code>{1}</code> makes the <b> print </b> The button appears in the title bar",
+    "PrintDialogIntro": "Turn on printing by setting up the <code>ShowPrint</code>",
+    "PrintDialogP": "In this example, the pop-up window content is a custom component <code>{0}</code> the <code>Footer</code> where the button itself is located is hidden, so the <code>Print</code> button built into the pop-up window cannot be displayed, and setting the <code>{1}</code> makes the <b>print</b>The button appears in the title bar",
     "PrintServiceTitle": "Print service",
-    "PrintServiceIntro": "By setting up the content components to print, call the <b> print service </b> directly print jobs",
+    "PrintServiceIntro": "By setting up the content components to print, call the <b>print service</b>directly print jobs",
     "DialogTitle": "The data query window"
   },
   "BootstrapBlazor.Shared.Samples.Tags": {
@@ -2348,13 +2349,13 @@
     "CutomNodeStyleIntro": "You can customize the node color according to the actual scene, or use the icon directly.",
     "LeftTitle": "Shown on the left",
     "LeftIntro": "Content takes turns appearing on the left side of the timeline",
-    "LeftP": "Control the content appearing on the left side of the timeline by setting the <code> IsLeft </code> property",
+    "LeftP": "Control the content appearing on the left side of the timeline by setting the <code>IsLeft</code> property",
     "AlternateTitle": "Alternate presentations",
     "AlternateIntro": "内容在时间轴两侧轮流出现",
-    "AlternateP": "Control the alternating timeline left and right by setting the <code> IsAlternate </code> property",
+    "AlternateP": "Control the alternating timeline left and right by setting the <code>IsAlternate</code> property",
     "DispalyCustomComponentTitle": "Show custom components",
     "DispalyCustomComponentIntro": "Custom components are displayed on the timeline",
-    "DispalyCustomComponentP": "Control the custom components that the timeline displays by setting the <code> CustomerComponent </code> of the <code>TimelineItem </code>",
+    "DispalyCustomComponentP": "Control the custom components that the timeline displays by setting the <code>CustomerComponent</code> of the <code>TimelineItem</code>",
     "SelectedItem1": "Positive order",
     "SelectedItem2": "Reverse order",
     "TimelineItemContent1": "Creation time",
@@ -2411,10 +2412,10 @@
   "BootstrapBlazor.Shared.Samples.Titles": {
     "Title": "Title",
     "SubTitle": "Used to set page title",
-    "Tips": "<p><code>NET6. 0</code> you can use the Microsoft <code> PageTitle </code> component to set the page title. This component additionally provides setting the current page title in the form of service</p>",
+    "Tips": "<p><code>NET6. 0</code> you can use the Microsoft <code>PageTitle</code> component to set the page title. This component additionally provides setting the current page title in the form of service</p>",
     "BasicUsageTitle": "BasicUsage",
-    "BasicUsageIntro": "Add the <code> Title </code> component to the web page and set the <code> text </code> attribute",
-    "BasicUsageTips": "The <code> Title </code> component is used by ordinary components after setting <code> text </code>, and can be called by the service when the <code> text </code> attribute is not set",
+    "BasicUsageIntro": "Add the <code>Title</code> component to the web page and set the <code>text</code> attribute",
+    "BasicUsageTips": "The <code>Title</code> component is used by ordinary components after setting <code>text</code>, and can be called by the service when the <code>text</code> attribute is not set",
     "BasicUsageP": "<b>Set the <code>Text</code> property</b>",
     "BasicUsageTitleText": "I am the title",
     "BasicUsageP1": "Test page",
@@ -2491,7 +2492,7 @@
     "BaseUsageText": "Basic usage",
     "IntroText1": "Click the Generate button to generate a <code>QRCode</code>",
     "DirectTitle": "Direct build",
-    "DirectIntro": "Specify the contents of the QR code with the <code>Content </code> parameter",
+    "DirectIntro": "Specify the contents of the QR code with the <code>Content</code> parameter",
     "SuccessText": "QR code generated successfully",
     "CallbackDescription": "Call back after QR code generation"
   },
diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json
index 20a8a9ba5..720df626c 100644
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@@ -1781,8 +1781,9 @@
     "BasicUsageLi5": "客户端验证机制支持模型的 <code>Required</code> 标签，通过设置 <code>ErrorMessage</code> 参数设置提示信息，未设置时使用默认的英文提示信息",
     "BasicUsageLi6": "表单默认检查表单内绑定字段值是否合法，如需要检查模型所有字段时可设置 <code>ValidateAllProperties</code> 属性值为 <code>true</code>",
     "BasicUsageLi7": "通过设置提交按钮 <code>Button</code> 属性 <code>IsAsync</code> 值，设置异步提交表单",
-    "BasicUsageLi8": "表单内组件通常用法都是使用双向绑定技术对 <code>Model</code> 的属性值进行双向绑定，当其值改变时会导致所在组件 <code>StateHasChanged</code>,方法被调用，即其所在组件或者页面进行刷新重新渲染",
+    "BasicUsageLi8": "表单内组件通常用法都是使用双向绑定技术对 <code>Model</code> 的属性值进行双向绑定，当其值改变时会导致所在组件 <code>StateHasChanged</code> 方法被调用，即其所在组件或者页面进行刷新重新渲染",
     "BasicUsageLi9": "表单内组件控件的值修改后 <code>OnFieldChanged</code> 方法被调用",
+    "FormLabelWidth": "组件前置标签默认宽度为 <code>120px</code> 六个汉字，如需要更多汉字请在项目样式文件中更改样式变量 <code>--bs-row-label-width</code> 即可",
     "BasicUsageP2": "注意事项：",
     "InnerComponentTitle": "内置组件",
     "InnerComponentIntro": "放置支持表单组件到 <code>ValidateForm</code> 中",
@@ -1796,7 +1797,7 @@
     "InnerComponentP2": "本例中通过设置 <b>提交按钮</b> 属性 <code>IsAsync</code> 来异步提交表单，点击提交后禁用自身，异步操作完毕后恢复",
     "CustomDisplsyErrorTitle": "自定义显示错误信息",
     "CustomDisplsyErrorIntro": "通过调用 <code>SetError</code> 方法设置自定义错误信息",
-    "CustomDisplsyErrorP1": "<b>应用场景</b>,<div>客户端验证通过后进行数据库保存操作，如果出现其他问题，后仍然可以进行表单自定义错误提示，本例中数据验证合法后，点击<code>提交表单</code>按钮后，姓名字段会显示,<code>数据库中已存在</code>这样的自定义提示信息</div>",
+    "CustomDisplsyErrorP1": "<b>应用场景</b><p>客户端验证通过后进行数据库保存操作，如果出现其他问题，后仍然可以进行表单自定义错误提示，本例中数据验证合法后，点击<code>提交表单</code>按钮后，姓名字段会显示,<code>数据库中已存在</code>这样的自定义提示信息</p>",
     "ValidatorAllFieldTitle": "验证所有字段值",
     "ValidatorAllFieldIntro": "此组件默认检查表单内模型绑定字段值，如需要检查模型所有字段值时设置 <code>ValidateAllProperties</code> 值",
     "ValidatorAllFieldP1": " 本例中未放置 <code>Address</code>，由于设置 <code>ValidateAllProperties</code> 参数值为 <code>true</code>，所以 <code>Address</code> 字段仍然被检查，及时表单内所有数据均合法后，提交数据时仍然触发 <code>OnInvalidSubmit</code> 回调委托",
-- 
Gitee


From a568cc2437cb72f2d8296ede2542c782f153ad74 Mon Sep 17 00:00:00 2001
From: Argo-Lenovo <argo@163.com>
Date: Sun, 20 Mar 2022 15:52:26 +0800
Subject: [PATCH 3/3] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=20ValidateForm=20?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Shared/Samples/ValidateForms.razor | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/BootstrapBlazor.Shared/Samples/ValidateForms.razor b/src/BootstrapBlazor.Shared/Samples/ValidateForms.razor
index 7e516047e..e5034edd2 100644
--- a/src/BootstrapBlazor.Shared/Samples/ValidateForms.razor
+++ b/src/BootstrapBlazor.Shared/Samples/ValidateForms.razor
@@ -6,7 +6,7 @@
 <h4>@Localizer["SubTitle"]</h4>
 
 <DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
-    <p>@Localizer["BasicUsageP1"]</p>
+    <p><b>@Localizer["BasicUsageP1"]</b></p>
     <ul class="ul-demo mb-3">
         <li>@((MarkupString)Localizer["BasicUsageLi1"].Value)</li>
         <li>@((MarkupString)Localizer["BasicUsageLi2"].Value)</li>
@@ -17,9 +17,10 @@
         <li>@((MarkupString)Localizer["BasicUsageLi7"].Value)</li>
         <li>@((MarkupString)Localizer["BasicUsageLi9"].Value)</li>
     </ul>
-    <p>@Localizer["BasicUsageP2"]</p>
+    <p><b>@Localizer["BasicUsageP2"]</b></p>
     <ul class="ul-demo mb-3">
         <li>@((MarkupString)Localizer["BasicUsageLi8"].Value)</li>
+        <li>@((MarkupString)Localizer["FormLabelWidth"].Value)</li>
     </ul>
     <div class="form-demo">
         <ValidateForm Model="@Model" OnInvalidSubmit="@OnInvalidSubmit1"
@@ -39,7 +40,7 @@
 
 <DemoBlock Title="@Localizer["InnerComponentTitle"]" Introduction="@Localizer["InnerComponentIntro"]" Name="InnerComponent">
     <div class="form-demo">
-        <label class="legend">@Localizer["InnerComponentLabel"]</label>
+        <p class="legend">@Localizer["InnerComponentLabel"]</p>
         <p>@Localizer["InnerComponentP1"]</p>
         <ul class="ul-demo mb-3">
             <li>@Localizer["InnerComponentLi1"]</li>
-- 
Gitee