doc(PopConfirmButton): add hover focus sample documentation (#4735)

* doc: 更新注释文档 * doc: 增加 Trigger 示例 * doc: 增加本地化
dotnetcore · Nov 25, 2024 · 233ea83 · 233ea83
1 parent deaccd5
commit 233ea83
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 3 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/PopoverConfirms.razor b/src/BootstrapBlazor.Server/Components/Samples/PopoverConfirms.razor
@@ -166,6 +166,23 @@ private Func&lt;Task&gt;? OnConfirmAsync { get; set; }</Pre>
     </PopConfirmButton>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["PopoverConfirmsTriggerTitle"]"
+           Introduction="@Localizer["PopoverConfirmsTriggerIntro"]"
+           Name="Trigger">
+    <PopConfirmButton Placement="Placement.Top"
+                      ConfirmIcon="fa-solid fa-triangle-exclamation text-info"
+                      Color="Color.Primary"
+                      ConfirmButtonColor="Color.Info"
+                      Trigger="hover focus" ShowCloseButton="false" ShowConfirmButton="false"
+                      Text="@Localizer["PopoverConfirmsBodyTemplateButtonText"]">
+        <BodyTemplate>
+            <div class="d-flex align-items-center">
+                Label: Just a demo
+            </div>
+        </BodyTemplate>
+    </PopConfirmButton>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />
 
 <EventTable Items="@GetEvents()" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/PopoverConfirms.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/PopoverConfirms.razor.cs
@@ -166,6 +166,30 @@ private static AttributeItem[] GetAttributes() =>
             Type = "string",
             ValueList = "",
             DefaultValue = " "
+        },
+        new()
+        {
+            Name = nameof(PopConfirmButton.Trigger),
+            Description = "How pop confirm is triggered",
+            Type = "string",
+            ValueList = "click|hover|focus",
+            DefaultValue = "click"
+        },
+        new()
+        {
+            Name = nameof(PopConfirmButton.ShowCloseButton),
+            Description = "Whether to display the close button",
+            Type = "string",
+            ValueList = "true/false",
+            DefaultValue = "true"
+        },
+        new()
+        {
+            Name = nameof(PopConfirmButton.ShowConfirmButton),
+            Description = "Whether to display the confirm button",
+            Type = "string",
+            ValueList = "true/false",
+            DefaultValue = "true"
         }
     ];
 

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -320,7 +320,9 @@
     "PopoverConfirmsShowButtonsTitle": "Custom Component",
     "PopoverConfirmsShowButtonsIntro": "By setting <code>ShowCloseButton=\"false\"</code> <code>ShowConfirmButton=\"false\"</code>, you don't display the built-in function buttons, and customize an <b>Approve</b> button in the custom component.",
     "PopoverConfirmsShowButtonsButtonText": "Custom Component",
-    "PopoverConfirmsShowButtonsDesc": "In a custom component, you can call the <code>Close</code> or <code>Confirm</code> method inside the component through cascading parameters"
+    "PopoverConfirmsShowButtonsDesc": "In a custom component, you can call the <code>Close</code> or <code>Confirm</code> method inside the component through cascading parameters",
+    "PopoverConfirmsTriggerTitle": "Trigger",
+    "PopoverConfirmsTriggerIntro": "By setting the <code>Trigger</code> parameter, you can set the way the component pops up the confirmation box. The default value is <code>click</code>. You can also set <code>hover focus</code> to use in combination."
   },
   "BootstrapBlazor.Server.Components.Components.CustomPopConfirmContent": {
     "CustomPopConfirmContentText": "Custom content",

diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -320,7 +320,9 @@
     "PopoverConfirmsShowButtonsTitle": "自定义组件",
     "PopoverConfirmsShowButtonsIntro": "通过设置 <code>ShowCloseButton=\"false\"</code> <code>ShowConfirmButton=\"false\"</code> 不显示内置功能按钮，在自定义组件中自定义一个 <b>审批</b> 按钮",
     "PopoverConfirmsShowButtonsButtonText": "自定义组件",
-    "PopoverConfirmsShowButtonsDesc": "自定义组件内可通过级联参数调用组件内部的 <code>Close</code> 或者 <code>Confirm</code> 方法"
+    "PopoverConfirmsShowButtonsDesc": "自定义组件内可通过级联参数调用组件内部的 <code>Close</code> 或者 <code>Confirm</code> 方法",
+    "PopoverConfirmsTriggerTitle": "触发方式",
+    "PopoverConfirmsTriggerIntro": "通过设置 <code>Trigger</code> 参数来设置组件弹出确认框的方式，默认值为 <code>click</code> 还可以设置 <code>hover focus</code> 可组合使用"
   },
   "BootstrapBlazor.Server.Components.Components.CustomPopConfirmContent": {
     "CustomPopConfirmContentText": "自定义弹窗内容",

diff --git a/src/BootstrapBlazor/Components/Button/PopConfirmButtonBase.cs b/src/BootstrapBlazor/Components/Button/PopConfirmButtonBase.cs
@@ -35,7 +35,7 @@ public abstract class PopConfirmButtonBase : ButtonBase
     public Placement Placement { get; set; }
 
     /// <summary>
-    /// 获得/设置 弹窗触发方式 默认 click
+    /// 获得/设置 弹窗触发方式 默认 click 可设置 hover focus
     /// </summary>
     [Parameter]
     public string? Trigger { get; set; }