doc: 更新 Popover 示例

Author: ArgoZhang

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

@@ -66,4 +66,19 @@
     </Popover>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["PopoversManualTitle"]"
+           Introduction="@Localizer["PopoversManualIntro"]"
+           Name="Manual">
+    <section ignore>
+        <ul class="ul-demo">
+            <li>@((MarkupString)Localizer["PopoversManualDescLI1"].Value)</li>
+            <li>@((MarkupString)Localizer["PopoversManualDescLI2"].Value)</li>
+        </ul>
+    </section>
+    <Popover Title="@Title" Content="@Content" IsHtml="true" Trigger="manual" @ref="_popover">
+        <i class="fa-solid fa-flag" style="cursor: pointer;"></i>
+    </Popover>
+    <Button Text="Tigger" OnClickWithoutRender="ToggleShow"></Button>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Server/Components/Samples/Popovers.razor.cs

@@ -18,6 +18,16 @@ public sealed partial class Popovers
 
     private string? _templateTitle;
 
+    private Popover? _popover;
+
+    private async Task ToggleShow()
+    {
+        if (_popover != null)
+        {
+            await _popover.Toggle();
+        }
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

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

@@ -352,7 +352,11 @@
     "PopoversCssClassTitle": "custom style",
     "PopoversCssClassIntro": "Customize the pop-up window by setting the <code>Popover</code> parameter <code>CssClass</code>",
     "PopoversCssClassDescription": "set up <code>Popover</code> parameter <code>CssClass=\"custom-popover\"</code> make custom styles",
-    "PopoversCssClassButtonText": "Click to activate/deactivate"
+    "PopoversCssClassButtonText": "Click to activate/deactivate",
+    "PopoversManualTitle": "Manual",
+    "PopoversManualIntro": "Use code to control the popover state by setting <code>Trigger=\"manual\"</code>",
+    "PopoversManualDescLI1": "The child component uses the cascade parameters to get the <code>Popover</code> instance and then calls its methods <code>Show</code> <code>Hide</code> <code>Toggle</code>",
+    "PopoversManualDescLI2": "Get the Popover instance through <code>@ref</code> and call its instances method"
   },
   "BootstrapBlazor.Server.Components.Samples.Progress": {
     "ProgressTitle": "Progress progress bar",

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

@@ -352,7 +352,11 @@
     "PopoversCssClassTitle": "自定义样式",
     "PopoversCssClassIntro": "通过设置 <code>Popover</code> 参数 <code>CssClass</code> 对弹窗进行自定义样式",
     "PopoversCssClassDescription": "设置 <code>Popover</code> 参数 <code>CssClass=\"custom-popover\"</code> 进行自定义样式",
-    "PopoversCssClassButtonText": "Click 激活/关闭"
+    "PopoversCssClassButtonText": "Click 激活/关闭",
+    "PopoversManualTitle": "手动控制状态",
+    "PopoversManualIntro": "通过设置 <code>Trigger=\"manual\"</code> 使用代码控制提示栏状态",
+    "PopoversManualDescLI1": "子组件使用级联参数得到 <code>Popover</code> 实例，然后调用其相应方法 <code>Show</code> <code>Hide</code> <code>Toggle</code>",
+    "PopoversManualDescLI2": "通过 <code>@ref</code> 获得 <code>Popover</code> 实例调用其对应方法"
   },
   "BootstrapBlazor.Server.Components.Samples.Progress": {
     "ProgressTitle": "Progress 进度条",