doc: 支持多语言

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/MaskDemo.razor

@@ -1,12 +1,8 @@
-<div style="background-color: #ffffff" class="row">
+<div class="mask-dialog-demo row">
     <div class="col-12">
         <h3>MaskDemo</h3>
     </div>
     <div class="col-12">
-        <Button Text="Close" OnClick="() => { OnCloseAsync?.Invoke(); }"></Button>
+        <DialogCloseButton></DialogCloseButton>
     </div>
 </div>
-@code {
-    [CascadingParameter]
-    private Func<Task>? OnCloseAsync { get; set; }
-}

src/BootstrapBlazor.Server/Components/Components/MaskDemo.razor.css

@@ -0,0 +1,5 @@
+.mask-dialog-demo {
+    background-color: var(--bs-body-bg);
+    border-radius: var(--bs-border-radius);
+    padding: 1rem;
+}

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

@@ -28,6 +28,6 @@
     <Mask @ref="CustomMask2"></Mask>
 </DemoBlock>
 
-<DemoBlock Title="代码关闭弹窗">
+<DemoBlock Title="@Localizer["MaskCloseTitle"]" Introduction="@Localizer["MaskCloseIntro"]">
     <Button Text="Show" OnClick="ShowCloseMask"></Button>
 </DemoBlock>

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

@@ -453,7 +453,9 @@
     "MaskContainerIntro": "Specify the mask position by setting the <code>MaskOption</code> parameter <code>ContainerId</code>",
     "MultipleMaskContainerTitle": "Multiple Mask",
     "MultipleMaskContainerIntro": "By customizing the <code>Mask</code> component, you can mask multiple parts of a web page.",
-    "MultipleMaskContainerDesc": "Set the <code>Mask</code> component in the component. When calling the <code>Show</code> instance method of <code>MaskService</code>, specify the <code>Mask</code> instance as the second parameter."
+    "MultipleMaskContainerDesc": "Set the <code>Mask</code> component in the component. When calling the <code>Show</code> instance method of <code>MaskService</code>, specify the <code>Mask</code> instance as the second parameter.",
+    "MaskCloseTitle": "Close By Code",
+    "MaskCloseIntro": "Close the popup by using the <code>DialogCloseButton</code> component or cascade parameters"
   },
   "BootstrapBlazor.Server.Components.Samples.Messages": {
     "MessagesTitle": "Message prompt",

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

@@ -453,7 +453,10 @@
     "MaskContainerIntro": "通过设置 <code>MaskOption</code> 参数 <code>ContainerId</code> 指定遮罩出现位置",
     "MultipleMaskContainerTitle": "多遮罩",
     "MultipleMaskContainerIntro": "通过自定义设置 <code>Mask</code> 组件可实现网页内多个局部进行遮罩操作",
-    "MultipleMaskContainerDesc": "组件内自己设置 <code>Mask</code> 组件，调用 <code>MaskService</code> 实例方法 <code>Show</code> 时，通过第二个参数指定 <code>Mask</code> 实例即可"
+    "MultipleMaskContainerDesc": "组件内自己设置 <code>Mask</code> 组件，调用 <code>MaskService</code> 实例方法 <code>Show</code> 时，通过第二个参数指定 <code>Mask</code> 实例即可",
+    "MaskCloseTitle": "代码关闭弹窗",
+    "MaskCloseIntro": "通过使用 <code>DialogCloseButton</code> 组件或者级联参数关闭弹窗"
+
   },
   "BootstrapBlazor.Server.Components.Samples.Messages": {
     "MessagesTitle": "Message 消息提示",