doc: 增加功能示例

Author: ArgoZhang

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

@@ -6,11 +6,15 @@
 
 <PackageTips Name="BootstrapBlazor.Dom2Image" />
 
-<DemoBlock Title="@Localizer["Dom2ImageElementTitle"]" Introduction="@Localizer["Dom2ImageElementIntro"]" Name="Normal">
+<DemoBlock Title="@Localizer["Dom2ImageNormalTitle"]" Introduction="@Localizer["Dom2ImageNormalIntro"]" Name="Normal">
     <section ignore>
-        <div>@((MarkupString)Localizer["Dom2ImageDesc"].Value)</div>
+        <p>@((MarkupString)Localizer["Dom2ImageDesc"].Value)</p>
+        <div>
+            <Button OnClick="OnGetUrlAsync" Text="@Localizer["Dom2ImageButtonText"]" Icon="fa-solid fa-image"></Button>
+            <Button OnClickWithoutRender="OnDownloadAsync" Text="@Localizer["Dom2ImageDownloadText"]" Icon="fa-solid fa-download"></Button>
+            <Button OnClickWithoutRender="OnFullAsync" Text="@Localizer["Dom2ImageFullText"]" Icon="fa-solid fa-arrows-up-down-left-right"></Button>
+        </div>
     </section>
-    <Button OnClick="OnExportAsync" Text="@Localizer["Dom2ImageButtonText"]" Icon="fa-solid fa-image" class="mb-3"></Button>
     <Table TItem="Foo" Items="@Items.Take(3)" Id="table-9527">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" />

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

@@ -37,11 +37,20 @@ protected override void OnInitialized()
         Items = Foo.GenerateFoo(LocalizerFoo);
     }
 
-    private async Task OnExportAsync()
+    private async Task OnGetUrlAsync()
     {
         _imageData = await Dom2ImageService.GetUrlAsync("#table-9527");
+    }
 
+    private async Task OnDownloadAsync()
+    {
         var fileName = $"table-9527-{DateTime.Now:HHmmss}";
         await Dom2ImageService.DownloadAsync("#table-9527", fileName);
     }
+
+    private async Task OnFullAsync()
+    {
+        var fileName = $"full-{DateTime.Now:HHmmss}";
+        await Dom2ImageService.DownloadAsync(".tabs-body-content:not(.d-none)", fileName);
+    }
 }

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

@@ -7187,5 +7187,15 @@
     "TaskBoardIntro": "Background task dashboard",
     "TaskBoardNormalTitle": "Basic usage",
     "TaskBoardNormalIntro": "This component provides detailed information about background task schedule trigger."
+  },
+  "BootstrapBlazor.Server.Components.Samples.Dom2Images": {
+    "Dom2ImageTitle": "Dom2Image",
+    "Dom2ImageIntro": "Export HTML snippets as images",
+    "Dom2ImageNormalTitle": "Basic usage",
+    "Dom2ImageNormalIntro": "Convert the node to an image by specifying a <code>Selector</code>",
+    "Dom2ImageDesc": "Since the underlying framework uses <a href=\"https://github.com/zumerlab/snapdom?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">SnapDOM</a> , if you encounter any problems during actual use, please refer to the project <a href=\"https://github.com/zumerlab/snapdom/issues?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">Issue</a>",
+    "Dom2ImageButtonText": "Convert",
+    "Dom2ImageDownloadText": "Download",
+    "Dom2ImageFullText": "Capture"
   }
 }

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

@@ -7188,5 +7188,15 @@
     "TaskBoardIntro": "后台任务看板",
     "TaskBoardNormalTitle": "基本用法",
     "TaskBoardNormalIntro": "本组件提供后台任务调度触发器详细信息"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Dom2Images": {
+    "Dom2ImageTitle": "Dom2Image 元素转图片",
+    "Dom2ImageIntro": "将 Html 片段导出为图片",
+    "Dom2ImageNormalTitle": "基本用法",
+    "Dom2ImageNormalIntro": "通过指定 <code>Selector</code> 将此节点转成图片",
+    "Dom2ImageDesc": "由于底层使用的是 <a href=\"https://github.com/zumerlab/snapdom?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">SnapDOM</a> 实际使用过程中遇到问题请参考项目 <a href=\"https://github.com/zumerlab/snapdom/issues?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">Issue</a>",
+    "Dom2ImageButtonText": "转换",
+    "Dom2ImageDownloadText": "下载",
+    "Dom2ImageFullText": "长截图"
   }
 }