doc: 更新示例

Author: ArgoZhang

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

@@ -1,6 +1,14 @@
 @page "/otp-input"
 @inject IStringLocalizer<OtpInputs> Localizer
 
+<HeadContent>
+    <style>
+        .input-group-text {
+            --bb-input-group-label-width: 100px;
+        }
+    </style>
+</HeadContent>
+
 <h3>@Localizer["OtpInputsTitle"]</h3>
 
 <h4>@Localizer["OtpInputsDescription"]</h4>
@@ -9,45 +17,34 @@
     <p>@((MarkupString)Localizer["OtpInputsTips"].Value)</p>
 </Tips>
 
-<DemoBlock Title="@Localizer["OtpInputsNormalTitle"]"
-           Introduction="@Localizer["OtpInputsNormalIntro"]"
-           Name="Normal">
-    <OtpInput Value="@_value"></OtpInput>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["OtpInputsReadonlyTitle"]"
-           Introduction="@Localizer["OtpInputsReadonlyIntro"]"
-           Name="Readonly">
-    <OtpInput Value="@_value" IsReadonly="true"></OtpInput>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["OtpInputsDisabledTitle"]"
-           Introduction="@Localizer["OtpInputsDisabledIntro"]"
-           Name="Disabled">
-    <OtpInput Value="@_value" IsDisabled="true"></OtpInput>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["OtpInputsTypeTitle"]"
-           Introduction="@Localizer["OtpInputsTypeIntro"]"
-           Name="Type">
-    <div class="row g-3">
-        <div class="col-12"><Select @bind-Value="_otpInputType"></Select></div>
-        <div class="col-12"><OtpInput Value="@_value" Type="_otpInputType"></OtpInput></div>
-    </div>
-</DemoBlock>
-
 <DemoBlock Title="@Localizer["OtpInputsTypeTitle"]"
            Introduction="@Localizer["OtpInputsTypeIntro"]"
            Name="Type">
-    <div class="row g-3">
+    <div class="row g-3 mb-3">
         <div class="col-12 col-sm-6">
             <BootstrapInputGroup>
                 <BootstrapInputGroupLabel DisplayText="Type"></BootstrapInputGroupLabel>
                 <Select @bind-Value="_otpInputType"></Select>
             </BootstrapInputGroup>
         </div>
-        <div class="col-12">
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="PlaceHolder"></BootstrapInputGroupLabel>
+                <BootstrapInput @bind-Value="@_placeHolder"></BootstrapInput>
+            </BootstrapInputGroup>
+        </div>
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="Readonly"></BootstrapInputGroupLabel>
+                <Switch @bind-Value="@_readonly"></Switch>
+            </BootstrapInputGroup>
+        </div>
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="Disable"></BootstrapInputGroupLabel>
+                <Switch @bind-Value="@_disabled"></Switch>
+            </BootstrapInputGroup>
         </div>
     </div>
-    <OtpInput Value="@_value" Type="_otpInputType"></OtpInput>
+    <OtpInput Value="@_value" Type="_otpInputType" PlaceHolder="@_placeHolder" IsReadonly="_readonly" IsDisabled="_disabled"></OtpInput>
 </DemoBlock>

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

@@ -13,4 +13,10 @@ public partial class OtpInputs
     private string _value = "818924";
 
     private OtpInputType _otpInputType;
+
+    private string _placeHolder = "X";
+
+    private bool _readonly = false;
+
+    private bool _disabled = false;
 }