doc: 更新示例

Author: ArgoZhang

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

@@ -9,59 +9,63 @@
 <DemoBlock Title="@Localizer["TextAreaNormalTitle"]"
            Introduction="@Localizer["TextAreaNormalIntro"]"
            Name="Normal">
-    <label class="form-label mb-3">@Localizer["TextAreaLabel"]</label>
     <Textarea PlaceHolder="@Localizer["TextAreaPlaceHolder"]" rows="4" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TextAreaDisableTitle"]"
            Introduction="@Localizer["TextAreaDisableIntro"]"
            Name="IsDisabled">
-    <label class="form-label mb-3">@Localizer["TextAreaLabel"]</label>
     <Textarea PlaceHolder="@Localizer["TextAreaPlaceHolder"]" rows="4" IsDisabled="true" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TextAreaReadOnlyTitle"]"
            Introduction="@Localizer["TextAreaReadOnlyIntro"]"
            Name="ReadOnly">
-    <label class="form-label mb-3">@Localizer["TextAreaLabel"]</label>
-<Textarea PlaceHolder="@Localizer["TextAreaPlaceHolder"]" rows="4" readonly />
+    <Textarea PlaceHolder="@Localizer["TextAreaPlaceHolder"]" rows="4" readonly />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TextAreaHeightTitle"]"
            Introduction="@Localizer["TextAreaHeightIntro"]"
            Name="Rows">
-    <label class="form-label mb-3">@Localizer["TextAreaLabel"]</label>
-
-<Textarea PlaceHolder="@Localizer["TextAreaPlaceHolder"]" rows="4" />
+    <Textarea PlaceHolder="@Localizer["TextAreaPlaceHolder"]" rows="4" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TextAreaBindWayTitle"]"
            Introduction="@Localizer["TextAreaBindWayIntro"]"
            Name="BindValue">
-    <div class="row g-3">
-        <div class="col-12">
-            <label class="form-label">@Localizer["TextAreaLabel"]</label>
-            <Textarea PlaceHolder="@Localizer["TextAreaPlaceHolder"]" rows="4" @bind-Value="@Text"></Textarea>
-        </div>
+    <Textarea PlaceHolder="@Localizer["TextAreaPlaceHolder"]" rows="4" @bind-Value="@Text"></Textarea>
+    <section ignore class="row g-3">
         <div class="col-12">
             <label class="form-label">@Localizer["TextAreaBindWayBindValue"]</label>
             <div class="form-control textarea-demo">@Text</div>
         </div>
-    </div>
+    </section>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TextAreaScrollTitle"]"
            Introduction="@Localizer["TextAreaScrollIntro"]"
            Name="IsAutoScroll">
     <Textarea class="mb-3" PlaceHolder="@Localizer["TextAreaPlaceHolder"]" rows="10" @ref="TextareaElement" @bind-Value="@ChatText" IsAutoScroll="IsAutoScroll" />
+    <section ignore>
+        <BootstrapInputGroup>
+            <Button Text="@Localizer[ChatLocalizerName]" OnClick="MockChat" Icon="fa-fw fas fa-comments" />
+            <Button Text="@Localizer["TextAreaScrollToTop"]" OnClick="ScrollToTop" />
+            <Button Text="@Localizer["TextAreaScrollToBottom"]" OnClick="ScrollToBottom" />
+            <Button Text="@Localizer["TextAreaScrollTo"]" OnClick="ScrollTo20" />
+            <Button Text="@($"{Localizer["TextAreaAutoScroll"]}{(IsAutoScroll ? " On":" Off")}" )" OnClick="SwitchAutoScroll" />
+        </BootstrapInputGroup>
+    </section>
+</DemoBlock>
 
-    <BootstrapInputGroup>
-        <Button Text="@Localizer[ChatLocalizerName]" OnClick="MockChat" Icon="fa-fw fas fa-comments" />
-        <Button Text="@Localizer["TextAreaScrollToTop"]" OnClick="ScrollToTop" />
-        <Button Text="@Localizer["TextAreaScrollToBottom"]" OnClick="ScrollToBottom" />
-        <Button Text="@Localizer["TextAreaScrollTo"]" OnClick="ScrollTo20" />
-        <Button Text="@($"{Localizer["TextAreaAutoScroll"]}{(IsAutoScroll ? " On":" Off")}" )" OnClick="SwitchAutoScroll" />
-    </BootstrapInputGroup>
+<DemoBlock Title="@Localizer["TextAreaKeyUpTitle"]"
+           Introduction="@Localizer["TextAreaKeyUpIntro"]"
+           Name="KeyUp">
+    <Textarea rows="4" autocomplete="off" autocorrect="off" spellcheck="false"
+              UseInputEvent="true" UseShiftEnter="true" PlaceHolder="@Localizer["TextAreaKeyUpPlaceHolder"]"
+              @bind-Value="@KeyText"></Textarea>
+    <section ignore>
+        <ConsoleLogger @ref="Logger" IsHtml="true" />
+    </section>
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />

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

@@ -3,6 +3,8 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
+using Microsoft.AspNetCore.Components.Web;
+
 namespace BootstrapBlazor.Server.Components.Samples;
 
 /// <summary>
@@ -15,6 +17,8 @@ public partial class TextAreas
 
     private string? Text { get; set; }
 
+    private string? KeyText { get; set; }
+
     private string? ChatText { get; set; }
 
     private int ScrollValue { get; set; }
@@ -88,6 +92,25 @@ private void MockChat()
         }
     }
 
+    [NotNull]
+    private ConsoleLogger? Logger { get; set; }
+
+    private Task<bool> OnKeyDownAsync(KeyboardEventArgs args)
+    {
+        var ret = true;
+        if (args.ShiftKey && args.Key == "Enter")
+        {
+            Text += $"{Environment.NewLine}";
+            Logger.Log("Press <kbd>Shift</kbd> + <kbd>Enter</kbd>");
+            StateHasChanged();
+        }
+        else if (args.Key == "Enter")
+        {
+            Logger.Log("Press <kbd>Enter</kbd>: call some method.");
+        }
+        return Task.FromResult(ret);
+    }
+
     /// <summary>
     /// Dispose
     /// </summary>