refactor: 增加占位符

Author: ArgoZhang

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

@@ -40,7 +40,14 @@
            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 class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="Type"></BootstrapInputGroupLabel>
+                <Select @bind-Value="_otpInputType"></Select>
+            </BootstrapInputGroup>
+        </div>
+        <div class="col-12">
+        </div>
     </div>
+    <OtpInput Value="@_value" Type="_otpInputType"></OtpInput>
 </DemoBlock>

src/BootstrapBlazor/Components/Input/OtpInput.razor

@@ -11,7 +11,8 @@
         else
         {
             var charIndex = index;
-            <input type="@TypeString" maxlength="@MaxLengthString" inputmode="@TypeModeString" class="@ItemClassString" value="@GetValueString(index)" @onchange="e => OnChanged(e.Value!.ToString(), charIndex)" />
+            <input type="@TypeString" maxlength="@MaxLengthString" inputmode="@TypeModeString" placeholder="@PlaceHolder"
+                   class="@ItemClassString" value="@GetValueString(index)" @onchange="e => OnChanged(e.Value!.ToString(), charIndex)" />
         }
     }
 </div>

src/BootstrapBlazor/Components/Input/OtpInput.razor.cs

@@ -29,6 +29,12 @@ public partial class OtpInput
     [Parameter]
     public OtpInputType Type { get; set; }
 
+    /// <summary>
+    /// Gets or sets the placeholder of the OTP input. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? PlaceHolder { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-opt-input")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();

src/BootstrapBlazor/Components/Input/OtpInput.razor.scss

@@ -30,4 +30,8 @@
             text-align: center;
         }
     }
+
+    span.bb-opt-item {
+        color: #b8b8b8;
+    }
 }