!3751 doc(#I6ABBE): update scroll demo

* update scroll demo

src/BootstrapBlazor.Shared/Demos/Scroll/ScrollNormal.razor

@@ -0,0 +1,8 @@
+@inject IStringLocalizer<ScrollNormal> Localizer
+
+<div>
+    <Scroll class="scroll-demo" Height="200px">
+        <div style="height: 400px;">@Localizer["ScrollNormalDescription"]</div>
+        <div>@Localizer["ScrollNormalbottom"]</div>
+    </Scroll>
+</div>

src/BootstrapBlazor.Shared/Locales/en.json

@@ -1332,16 +1332,18 @@
     "DividerContent": "I am a custom content <code>div</code> element"
   },
   "BootstrapBlazor.Shared.Samples.Scrolls": {
-    "Title": "Scroll",
+    "ScrollTitle": "Scroll",
-    "H1": "Add scroll bars to components whose height or width exceeds the standard",
+    "ScrollDescription": "Add scroll bars to components whose height or width exceeds the standard",
-    "P1": "The scroll bar can be rendered only when its element has a fixed height. Its <code>height</code> attribute can be set through the coat element",
+    "ScrollTips": "The scroll bar can be rendered only when its element has a fixed height. Its <code>height</code> attribute can be set through the coat element",
-    "Block1Title": "Common usage",
+    "ScrollNormalTitle": "Common usage",
-    "Block1Intro": "Add a scroll bar to the component. By setting the height of <code>Height</code> to 200px, the scroll bar appears when the height of the inner child element is 400px",
+    "ScrollNormalIntro": "Add a scroll bar to the component. By setting the height of <code>Height</code> to 200px, the scroll bar appears when the height of the inner child element is 400px",
-    "D1": "Please scroll the scroll bar on the right",
-    "D2": "bottom",
     "Desc1": "Subassembly",
     "Desc2": "Component height"
   },
+  "BootstrapBlazor.Shared.Demos.Scroll.ScrollNormal": {
+    "ScrollNormalDescription": "Please scroll the scroll bar on the right",
+    "ScrollNormalbottom": "bottom"
+  },
   "BootstrapBlazor.Shared.Samples.LayoutPages": {
     "H1": "full page level components",
     "P1": "via built-in components",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -1335,16 +1335,18 @@
     "DividerContent": "我是自定义内容 <code>div</code> 元素"
   },
   "BootstrapBlazor.Shared.Samples.Scrolls": {
-    "Title": "Scroll 滚动条",
+    "ScrollTitle": "Scroll 滚动条",
-    "H1": "给高度或者宽度超标的组件增加滚动条",
+    "ScrollDescription": "给高度或者宽度超标的组件增加滚动条",
-    "P1": "其元素必须拥有固定高度时才可呈现滚动条，可以通过外套元素设置其 <code>height</code> 属性",
+    "ScrollTips": "其元素必须拥有固定高度时才可呈现滚动条，可以通过外套元素设置其 <code>height</code> 属性",
-    "Block1Title": "普通用法",
+    "ScrollNormalTitle": "普通用法",
-    "Block1Intro": "给组件增加滚动条，通过设置 <code>Height</code> 高度值为 200px 使内部子元素高度为 400px 时出现滚动条",
+    "ScrollNormalIntro": "给组件增加滚动条，通过设置 <code>Height</code> 高度值为 200px 使内部子元素高度为 400px 时出现滚动条",
-    "D1": "请滚动右侧滚动条",
-    "D2": "我是最底端",
     "Desc1": "子组件",
     "Desc2": "组件高度"
   },
+  "BootstrapBlazor.Shared.Demos.Scroll.ScrollNormal": {
+    "ScrollNormalDescription": "请滚动右侧滚动条",
+    "ScrollNormalbottom": "我是最底端"
+  },
   "BootstrapBlazor.Shared.Samples.LayoutPages": {
     "H1": "整页面级别组件",
     "P1": "通过内置组件",

src/BootstrapBlazor.Shared/Samples/Scrolls.razor

@@ -1,16 +1,12 @@
 @page "/scrolls"
+@inject IStringLocalizer<Scrolls> Localizer
 
-<h3>@Localizer["Title"]</h3>
+<h3>@Localizer["ScrollTitle"]</h3>
 
-<h4>@Localizer["H1"]</h4>
+<h4>@Localizer["ScrollDescription"]</h4>
 
-<p>@((MarkupString)Localizer["P1"].Value)</p>
+<p>@((MarkupString)Localizer["ScrollTips"].Value)</p>
 
-<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]"  Name="Normal">
+<DemoBlock Title="@Localizer["ScrollNormalTitle"]" Introduction="@Localizer["ScrollNormalIntro"]" Name="Normal" Demo="typeof(Demos.Scroll.ScrollNormal)" />
-    <Scroll class="scroll-demo" Height="200px">
-        <div style="height: 400px;">@Localizer["D1"]</div>
-        <div>@Localizer["D2"]</div>
-    </Scroll>
-</DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Samples/Scrolls.razor.cs

@@ -5,29 +5,29 @@
 namespace BootstrapBlazor.Shared.Samples;
 
 /// <summary>
-/// 
+/// Scrolls
 /// </summary>
 public sealed partial class Scrolls
 {
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<Scrolls>? Localizer { get; set; }
-
     /// <summary>
     /// 获得属性方法
     /// </summary>
     /// <returns></returns>
-    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+    private IEnumerable<AttributeItem> GetAttributes()
+    {
+        return new AttributeItem[]
         {
             // TODO: 移动到数据库中
-            new AttributeItem() {
+            new AttributeItem()
+            {
                 Name = "ChildContent",
                 Description = Localizer["Desc1"],
                 Type = "RenderFragment",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
-            new AttributeItem() {
+            new AttributeItem()
+            {
                 Name = "Height",
                 Description = Localizer["Desc2"],
                 Type = "string",
@@ -36,3 +36,4 @@ public sealed partial class Scrolls
             }
         };
     }
+}