doc(ColorPicker): add localization doc (#6843)

* doc: 增加本地化

* doc: 更新 ColorPicker 示例

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor

@@ -12,16 +12,16 @@
 
 <DemoBlock Title="@Localizer["ValueTitle"]" Introduction="@Localizer["ValueIntro"]" Name="Value">
     <p>@((MarkupString)Localizer["ValueDescription"].Value)</p>
-    <ColorPicker Value="@Value" />
+    <ColorPicker Value="@Value"></ColorPicker>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue">
-    <ColorPicker @bind-Value="@Value" />
+    <ColorPicker @bind-Value="@Value"></ColorPicker>
     <div class="mt-3">Value: @Value</div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled">
-    <ColorPicker Value="@Value" IsDisabled="true" />
+    <ColorPicker Value="@Value" IsDisabled="true"></ColorPicker>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TemplateTitle"]" Introduction="@Localizer["TemplateIntro"]" Name="Template">
@@ -40,7 +40,7 @@
     <ValidateForm Model="Dummy">
         <div class="row g-3 form-inline">
             <div class="col-6">
-                <ColorPicker @bind-Value="@Dummy.Name" />
+                <ColorPicker @bind-Value="@Dummy.Name"></ColorPicker>
             </div>
         </div>
     </ValidateForm>
@@ -50,14 +50,14 @@
     <section ignore>
         <div class="row form-inline">
             <div class="col-12 col-sm-6">
-                <Switch @bind-Value="_opacityIsSupport" DisplayText="SupportOpacity" ShowLabel="true"></Switch>
+                <Switch @bind-Value="_opacityIsSupport" DisplayText="@Localizer["SupportOpacity"]" ShowLabel="true"></Switch>
             </div>
             <div class="col-12 col-sm-6">
-                <Switch @bind-Value="_opacityIsDisabled" DisplayText="Disabled" ShowLabel="true"></Switch>
+                <Switch @bind-Value="_opacityIsDisabled" DisplayText="@Localizer["Disabled"]" ShowLabel="true"></Switch>
             </div>
         </div>
     </section>
-    <ColorPicker @bind-Value="@_opacityValue" IsSupportOpacity="_opacityIsSupport" IsDisabled="_opacityIsDisabled" />
+    <ColorPicker @bind-Value="@_opacityValue" IsSupportOpacity="_opacityIsSupport" IsDisabled="_opacityIsDisabled"></ColorPicker>
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -2421,7 +2421,9 @@
     "AttributeTemplate": "The template for display",
     "AttributeFormatter": "Display color value formatting callback method",
     "AttributeIsSupportOpacity": "Whether to support transparency",
-    "AttributeSwatches": "Preset candidate colors"
+    "AttributeSwatches": "Preset candidate colors",
+    "SupportOpacity": "Support Opacity",
+    "Disabled": "Disabled"
   },
   "BootstrapBlazor.Server.Components.Samples.DateTimePickers": {
     "Title": "DatePicker",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -2421,7 +2421,9 @@
     "AttributeTemplate": "显示模板",
     "AttributeFormatter": "显示颜色值格式化回调方法",
     "AttributeIsSupportOpacity": "是否支持透明度",
-    "AttributeSwatches": "预设候选颜色"
+    "AttributeSwatches": "预设候选颜色",
+    "SupportOpacity": "支持透明",
+    "Disabled": "禁用"
   },
   "BootstrapBlazor.Server.Components.Samples.DateTimePickers": {
     "Title": "DatePicker 日期选择器",