doc(Icons): add click to copy to clipboard function (#5566)

ArgoZhang · web-flow · commit 523dadad2504 · 2025-03-07T15:19:42.000+08:00
* refactor: 更新基类

* doc: 更新多语言资源文件

* refactor: 更改基类名称
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/AntDesign/AntDesignIcons.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/AntDesign/AntDesignIcons.razor
@@ -1,6 +1,6 @@
 ﻿@page "/ant-design-icon"
 @inject IStringLocalizer<AntDesignIcons> Localizer
-@inherits BootstrapIcon
+@inherits BootstrapIconBase
 
 <h3>@Localizer["AntDesignIconTitle"]</h3>
 
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapIconBase.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapIconBase.razor
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapIconBase.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapIconBase.razor.cs
@@ -8,8 +8,8 @@ namespace BootstrapBlazor.Server.Components.Samples.Icons;
 /// <summary>
 /// Icon component base class
 /// </summary>
-[JSModuleAutoLoader("Samples/Icons/BootstrapIcon.razor.js")]
-public partial class BootstrapIcon
+[JSModuleAutoLoader("Samples/Icons/BootstrapIconBase.razor.js")]
+public partial class BootstrapIconBase
 {
 
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapIconBase.razor.js b/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapIconBase.razor.js
@@ -1,6 +1,7 @@
 ﻿import Data from '../../../_content/BootstrapBlazor/modules/data.js';
 import EventHandler from '../../../_content/BootstrapBlazor/modules/event-handler.js';
 import { copy } from '../../../_content/BootstrapBlazor/modules/utility.js';
+
 export function init(id) {
     const el = document.getElementById(id);
     const tooltips = [];
@@ -23,7 +24,9 @@ export function init(id) {
         tooltip.setContent({ '.tooltip-inner': 'Copy' });
         const handler = setTimeout(() => {
             clearTimeout(handler);
-            tooltip.setContent({ '.tooltip-inner': div.getAttribute('data-bs-original-title') });
+            tooltip.setContent({
+                '.tooltip-inner': div.getAttribute('data-bs-original-title')
+            });
         }, 1000);
     });
     Data.set(id, {
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/ElementIcon/ElementIcons.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/ElementIcon/ElementIcons.razor
@@ -1,6 +1,6 @@
 ﻿@page "/element-icon"
 @inject IStringLocalizer<ElementIcons> Localizer
-@inherits BootstrapIcon
+@inherits BootstrapIconBase
 
 <h3>@Localizer["ElementIconTitle"]</h3>
 
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/IconPark/IconParks.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/IconPark/IconParks.razor
@@ -1,6 +1,6 @@
 ﻿@page "/icon-park"
 @inject IStringLocalizer<IconParks> Localizer
-@inherits BootstrapIcon
+@inherits BootstrapIconBase
 
 <h3>@Localizer["IconParkTitle"]</h3>
 
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/OctIcon/OctIcons.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/OctIcon/OctIcons.razor
@@ -1,6 +1,6 @@
 ﻿@page "/oct-icon"
 @inject IStringLocalizer<OctIcons> Localizer
-@inherits BootstrapIcon
+@inherits BootstrapIconBase
 
 <h3>@Localizer["OctIconTitle"]</h3>
 
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIcon/UniverIcons.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIcon/UniverIcons.razor
@@ -1,6 +1,6 @@
 ﻿@page "/univer-icon"
 @inject IStringLocalizer<UniverIcons> Localizer
-@inherits BootstrapIcon
+@inherits BootstrapIconBase
 
 <h3>@Localizer["UniverIconTitle"]</h3>
 
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -6729,7 +6729,7 @@
     "P1": "Extending the Component Package by Reference",
     "P2": "After adding the stylesheet file link open icon"
   },
-  "BootstrapBlazor.Server.Components.Samples.Icons.ElementIcons": {
+  "BootstrapBlazor.Server.Components.Samples.Icons.ElementIcon.ElementIcons": {
     "ElementIconTitle": "Element-plus Icons",
     "ElementIconDescription": "Free, high quality, open source icon library",
     "CopiedTooltipText": "Copied",
@@ -6755,7 +6755,7 @@
     "P1": "Extending the Component Package by Reference",
     "P2": "After adding the stylesheet file link open icon"
   },
-  "BootstrapBlazor.Server.Components.Samples.Icons.IconParks": {
+  "BootstrapBlazor.Server.Components.Samples.Icons.IconPark.IconParks": {
     "IconParkTitle": "ByteDance Svg Icon Lib",
     "IconParkDescription": "It has covered all platforms of ByteDance commercial product series and has been introduced and used by 12 platforms as the underlying code, ensuring the uniformity of icon style and cognition.",
     "CopiedTooltipText": "Copied",
@@ -6764,7 +6764,7 @@
     "P3": "Please copy the following code segement",
     "Icons": "For icon list, please visit <a href=\"https://iconpark.oceanengine.com/official\" target=\"_blank\">[portal]</a>"
   },
-  "BootstrapBlazor.Server.Components.Samples.Icons.AntDesignIcons": {
+  "BootstrapBlazor.Server.Components.Samples.Icons.AntDesign.AntDesignIcons": {
     "AntDesignIconTitle": "AntDesign Svg Icon Lib",
     "AntDesignIconDescription": "Semantic vector graphics.",
     "CopiedTooltipText": "Copied",
@@ -6773,7 +6773,7 @@
     "P3": "Please copy the following code segement",
     "Icons": "For icon list, please visit <a href=\"https://ant.design/components/icon\" target=\"_blank\">[portal]</a>"
   },
-  "BootstrapBlazor.Server.Components.Samples.Icons.OctIcons": {
+  "BootstrapBlazor.Server.Components.Samples.Icons.OctIcon.OctIcons": {
     "OctIconTitle": "Oct Svg Icon Lib",
     "OctIconDescription": "A scalable set of icons handcrafted with <3 by GitHub",
     "CopiedTooltipText": "Copied",
@@ -6782,7 +6782,7 @@
     "P3": "Please copy the following code segement",
     "Icons": "For icon list, please visit <a href=\"https://primer.style/foundations/icons\" target=\"_blank\">[portal]</a>"
   },
-  "BootstrapBlazor.Server.Components.Samples.Icons.UniverIcons": {
+  "BootstrapBlazor.Server.Components.Samples.Icons.UniverIcon.UniverIcons": {
     "UniverIconTitle": "Univer Svg Icon Lib",
     "UniverIconDescription": "Icons used by Univer",
     "CopiedTooltipText": "Copied",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -6729,7 +6729,7 @@
     "P1": "通过引用扩展组件包",
     "P2": "后添加样式表文件链接开启图标"
   },
-  "BootstrapBlazor.Server.Components.Samples.Icons.ElementIcons": {
+  "BootstrapBlazor.Server.Components.Samples.Icons.ElementIcon.ElementIcons": {
     "ElementIconTitle": "饿了么图标库",
     "ElementIconDescription": "饿了么免费开源图标库",
     "CopiedTooltipText": "拷贝成功",
@@ -6755,7 +6755,7 @@
     "P1": "通过引用扩展组件包",
     "P2": "后添加样式表文件链接开启图标"
   },
-  "BootstrapBlazor.Server.Components.Samples.Icons.IconParks": {
+  "BootstrapBlazor.Server.Components.Samples.Icons.IconPark.IconParks": {
     "IconParkTitle": "字节跳动图标库",
     "IconParkDescription": "已覆盖字节跳动商业化产品系所有平台，并被12个平台作为底层代码引入使用，保证了图标样式与认知的统一性",
     "CopiedTooltipText": "拷贝成功",
@@ -6764,7 +6764,7 @@
     "P3": "请拷贝下方样式即可",
     "Icons": "图标列表请通过 <a href=\"https://iconpark.oceanengine.com/official\" target=\"_blank\">[传送门]</a> 查看"
   },
-  "BootstrapBlazor.Server.Components.Samples.Icons.AntDesignIcons": {
+  "BootstrapBlazor.Server.Components.Samples.Icons.AntDesign.AntDesignIcons": {
     "AntDesignIconTitle": "蚂蚁图标库",
     "AntDesignIconDescription": "语义化的矢量图形",
     "CopiedTooltipText": "拷贝成功",
@@ -6773,7 +6773,7 @@
     "P3": "请拷贝下方样式即可",
     "Icons": "图标列表请通过 <a href=\"https://ant.design/components/icon\" target=\"_blank\">[传送门]</a> 查看"
   },
-  "BootstrapBlazor.Server.Components.Samples.Icons.OctIcons": {
+  "BootstrapBlazor.Server.Components.Samples.Icons.OctIcon.OctIcons": {
     "OctIconTitle": "Github 图标库",
     "OctIconDescription": "Primer is a set of guidelines, principles, and patterns for designing and building UI at GitHub.",
     "CopiedTooltipText": "拷贝成功",
@@ -6782,7 +6782,7 @@
     "P3": "请拷贝下方样式即可",
     "Icons": "图标列表请通过 <a href=\"https://primer.style/foundations/icons\" target=\"_blank\">[传送门]</a> 查看"
   },
-  "BootstrapBlazor.Server.Components.Samples.Icons.UniverIcons": {
+  "BootstrapBlazor.Server.Components.Samples.Icons.UniverIcon.UniverIcons": {
     "UniverIconTitle": "Univer Icon 图标库",
     "UniverIconDescription": "Icons used by Univer",
     "CopiedTooltipText": "拷贝成功",

Original file line number	Diff line number	Diff line change
`@@ -8,8 +8,8 @@ namespace BootstrapBlazor.Server.Components.Samples.Icons;`
`8`	`8`	`/// <summary>`
`9`	`9`	`/// Icon component base class`
`10`	`10`	`/// </summary>`
`11`		`-[JSModuleAutoLoader("Samples/Icons/BootstrapIcon.razor.js")]`
`12`		`-public partial class BootstrapIcon`
	`11`	`+[JSModuleAutoLoader("Samples/Icons/BootstrapIconBase.razor.js")]`
	`12`	`+public partial class BootstrapIconBase`
`13`	`13`	`{`
`14`	`14`
`15`	`15`	`}`