doc: 增加 Smarts 示例

Author: ArgoZhang

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

@@ -16,5 +16,15 @@
 <DemoBlock Title="@Localizer["RDKitSmartsTitle"]"
            Introduction="@Localizer["RDKitSmartsIntro"]"
            Name="Smarts">
-    <RDKit Value="CC(=O)Oc1ccccc1C(=O)O" Smarts="Oc1[c,n]cccc1"></RDKit>
+    <section ignore>
+        <div class="row g-3">
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="@Localizer["RDKitSmartsLabel"]" />
+                    <Checkbox @bind-Value="_showSmarts"></Checkbox>
+                </BootstrapInputGroup>
+            </div>
+        </div>
+    </section>
+    <RDKit Value="CC(=O)Oc1ccccc1C(=O)O" Smarts="@Smarts"></RDKit>
 </DemoBlock>

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

@@ -10,5 +10,7 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public partial class RDKits
 {
+    private string? Smarts => _showSmarts ? "Oc1[c,n]cccc1" : "";
 
+    private bool _showSmarts;
 }

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

@@ -6845,6 +6845,7 @@
     "RDKitNormalTitle": "Basic usage",
     "RDKitNormalIntro": "Set the molecular formula through <code>Value</code> and draw the component",
     "RDKitSmartsTitle": "Smarts",
-    "RDKitSmartsIntro": "By setting the <code>Smarts</code> value, parts of the molecular formula can be highlighted"
+    "RDKitSmartsIntro": "By setting the <code>Smarts</code> value, parts of the molecular formula can be highlighted",
+    "RDKitSmartsLabel": "Show Smarts"
   }
 }

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

@@ -6845,6 +6845,7 @@
     "RDKitNormalTitle": "基础用法",
     "RDKitNormalIntro": "通过 <code>Value</code> 设置分子式，组件画图",
     "RDKitSmartsTitle": "Smarts",
-    "RDKitSmartsIntro": "通过设置 <code>Smarts</code> 值，高亮显示部分分子式"
+    "RDKitSmartsIntro": "通过设置 <code>Smarts</code> 值，高亮显示部分分子式",
+    "RDKitSmartsLabel": "显示 Smarts"
   }
 }