feat(OtpInput ): support responsive layout (#6284)

ArgoZhang · web-flow · commit ed4a2a4043a8 · 2025-06-24T09:11:45.000+08:00
* refactor: 移动变量节点位置方便覆盖

* refactor: 更改样式名称纠正单词拼写错误

* doc: 更新样式
diff --git a/src/BootstrapBlazor.Server/Components/Samples/OtpInputs.razor b/src/BootstrapBlazor.Server/Components/Samples/OtpInputs.razor
@@ -10,6 +10,11 @@
         .otp-input-demo {
             text-align: center;
         }
+
+            .otp-input-demo .bb-otp-input {
+                --bb-otp-item-width: 32px;
+                --bb-otp-font-size: 1.2em;
+            }
     </style>
 </HeadContent>
 
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/TwoFactorApp.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/TwoFactorApp.razor.css
@@ -36,7 +36,7 @@
         font-weight: 400;
     }
 
-::deep .bb-opt-input .bb-opt-item {
-    --bb-opt-item-width: 50px;
-    --bb-opt-font-size: 2em;
+::deep .bb-otp-input .bb-otp-item {
+    --bb-otp-item-width: 50px;
+    --bb-otp-font-size: 2em;
 }
diff --git a/src/BootstrapBlazor/Components/Input/OtpInput.razor.cs b/src/BootstrapBlazor/Components/Input/OtpInput.razor.cs
@@ -35,11 +35,11 @@ public partial class OtpInput
     [Parameter]
     public string? PlaceHolder { get; set; }
 
-    private string? ClassString => CssBuilder.Default("bb-opt-input")
+    private string? ClassString => CssBuilder.Default("bb-otp-input")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    private string? InputClassString => CssBuilder.Default("bb-opt-item")
+    private string? InputClassString => CssBuilder.Default("bb-otp-item")
         .AddClass("input-number-fix", Type == OtpInputType.Number)
         .AddClass(ValidCss)
         .Build();
diff --git a/src/BootstrapBlazor/Components/Input/OtpInput.razor.js b/src/BootstrapBlazor/Components/Input/OtpInput.razor.js
@@ -3,14 +3,14 @@
 export function init(id, invoke, method) {
     const el = document.getElementById(id);
     const skipKeys = ['Enter', 'Tab', 'Shift', 'Control', 'Alt'];
-    EventHandler.on(el, 'input', '.bb-opt-item', e => {
+    EventHandler.on(el, 'input', '.bb-otp-item', e => {
         const isNumber = e.target.getAttribute('type') === 'number';
         if (isNumber && e.target.value.length > 1) {
             e.target.value = e.target.value.slice(1, 2);
         }
         setValue(el, invoke, method);
     });
-    EventHandler.on(el, 'keydown', '.bb-opt-item', e => {
+    EventHandler.on(el, 'keydown', '.bb-otp-item', e => {
         if (e.ctrlKey) {
             return;
         }
@@ -40,7 +40,7 @@ export function init(id, invoke, method) {
             e.preventDefault();
         }
     });
-    EventHandler.on(el, 'focus', '.bb-opt-item', e => {
+    EventHandler.on(el, 'focus', '.bb-otp-item', e => {
         if (e.target.select) {
             e.target.select();
         }
@@ -49,7 +49,7 @@ export function init(id, invoke, method) {
     EventHandler.on(el, 'paste', e => {
         if (e.clipboardData && e.clipboardData.getData) {
             const pastedText = e.clipboardData.getData('text/plain');
-            const inputs = [...el.querySelectorAll('.bb-opt-item')];
+            const inputs = [...el.querySelectorAll('.bb-otp-item')];
             if (inputs.find(i => i.getAttribute('disabled') || i.getAttribute('readonly'))) {
                 return;
             }
@@ -69,20 +69,20 @@ export function init(id, invoke, method) {
 }
 
 const setValue = (el, invoke, method) => {
-    const val = [...el.querySelectorAll('.bb-opt-item')].map(input => input.value).join('');
+    const val = [...el.querySelectorAll('.bb-otp-item')].map(input => input.value).join('');
     invoke.invokeMethodAsync(method, val);
 }
 
 const setPrevFocus = (el, target) => {
-    const inputs = [...el.querySelectorAll('.bb-opt-item')];
+    const inputs = [...el.querySelectorAll('.bb-otp-item')];
     let index = inputs.indexOf(target);
     if (index > 0) {
         setFocus(inputs[index - 1]);
     }
 }
 
 const setNextFocus = (el, target) => {
-    const inputs = [...el.querySelectorAll('.bb-opt-item')];
+    const inputs = [...el.querySelectorAll('.bb-otp-item')];
     let index = inputs.indexOf(target);
     if (index < inputs.length - 1) {
         setFocus(inputs[index + 1]);
diff --git a/src/BootstrapBlazor/Components/Input/OtpInput.razor.scss b/src/BootstrapBlazor/Components/Input/OtpInput.razor.scss
@@ -1,24 +1,24 @@
-﻿.bb-opt-input {
+﻿.bb-otp-input {
+    --bb-otp-item-width: #{$bb-otp-item-width};
+    --bb-otp-item-disabled-color: #{$bb-otp-item-disabled-color};
+    --bb-otp-item-padding: #{$bb-otp-item-padding};
+    --bb-otp-item-margin: #{$bb-otp-item-margin};
+    --bb-otp-font-size: #{$bb-otp-font-size};
+    --bb-otp-border-width: #{$bb-otp-border-width};
     white-space: nowrap;
     overflow: hidden;
 
-    .bb-opt-item {
-        --bb-opt-item-width: 66px;
-        --bb-opt-item-disabled-color: #b8b8b8;
-        --bb-opt-item-padding: #{$bb-opt-item-padding};
-        --bb-opt-item-margin: #{$bb-opt-item-margin};
-        --bb-opt-font-size: #{$bb-opt-font-size};
-        --bb-opt-border-width: #{$bb-opt-border-width};
+    .bb-otp-item {
         display: inline-block;
-        border: var(--bb-opt-border-width) solid var(--bs-border-color);
-        font-size: var(--bb-opt-font-size);
-        padding: var(--bb-opt-item-padding);
+        border: var(--bb-otp-border-width) solid var(--bs-border-color);
+        font-size: var(--bb-otp-font-size);
+        padding: var(--bb-otp-item-padding);
         border-radius: var(--bs-border-radius);
-        width: var(--bb-opt-item-width);
-        height: var(--bb-opt-item-width);
+        width: var(--bb-otp-item-width);
+        height: var(--bb-otp-item-width);
 
         &:not(:last-child) {
-            margin-right: var(--bb-opt-item-margin);
+            margin-right: var(--bb-otp-item-margin);
         }
 
         &[type] {
@@ -33,9 +33,16 @@
         &.is-invalid {
             --bs-border-color: var(--bs-danger);
         }
+
+        &span {
+            color: var(--bb-otp-item-disabled-color);
+        }
     }
+}
 
-    span.bb-opt-item {
-        color: var(--bb-opt-item-disabled-color);
+@media (min-width: 768px) {
+    .bb-otp-input {
+        --bb-otp-item-width: 66px;
+        --bb-otp-font-size: 3em;
     }
 }
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -315,10 +315,12 @@ $bb-viewer-border-radius: 50%;
 $bb-ip-cell-max-width: 30px;
 
 // OptInput
-$bb-opt-item-padding: 0 .5em;
-$bb-opt-item-margin: .5rem;
-$bb-opt-font-size: 3em;
-$bb-opt-border-width: 1px;
+$bb-otp-item-width: 38px;
+$bb-otp-item-disabled-color: #b8b8b8;
+$bb-otp-item-padding: 0 .5em;
+$bb-otp-item-margin: .5rem;
+$bb-otp-font-size: 1.5em;
+$bb-otp-border-width: 1px;
 
 // Layout
 $bb-layout-header-height: 50px;
diff --git a/test/UnitTest/Components/OtpInputTest.cs b/test/UnitTest/Components/OtpInputTest.cs
@@ -19,7 +19,7 @@ public void OtpInput_Ok()
             pb.Add(a => a.Digits, 6);
         });
 
-        var items = cut.FindAll(".bb-opt-item");
+        var items = cut.FindAll(".bb-otp-item");
         Assert.Equal(6, items.Count);
 
         var item = items[0];
@@ -36,21 +36,21 @@ public void Readonly_Ok()
             pb.Add(a => a.IsReadonly, true);
         });
 
-        var item = cut.Find(".bb-opt-item");
+        var item = cut.Find(".bb-otp-item");
         Assert.Contains("readonly=\"readonly\"", item.OuterHtml);
 
         cut.SetParametersAndRender(pb =>
         {
             pb.Add(a => a.IsReadonly, false);
         });
-        item = cut.Find(".bb-opt-item");
-        Assert.Equal("<input type=\"number\" class=\"bb-opt-item input-number-fix\" inputmode=\"numeric\">", item.OuterHtml);
+        item = cut.Find(".bb-otp-item");
+        Assert.Equal("<input type=\"number\" class=\"bb-otp-item input-number-fix\" inputmode=\"numeric\">", item.OuterHtml);
 
         cut.SetParametersAndRender(pb =>
         {
             pb.Add(a => a.IsDisabled, true);
         });
-        item = cut.Find(".bb-opt-item");
+        item = cut.Find(".bb-otp-item");
         Assert.Contains("disabled=\"disabled\"", item.OuterHtml);
     }
 
@@ -63,16 +63,16 @@ public void Type_Ok()
             pb.Add(a => a.PlaceHolder, "X");
         });
 
-        var item = cut.Find(".bb-opt-item");
-        Assert.Equal("<input type=\"text\" class=\"bb-opt-item\" maxlength=\"1\" placeholder=\"X\">", item.OuterHtml);
+        var item = cut.Find(".bb-otp-item");
+        Assert.Equal("<input type=\"text\" class=\"bb-otp-item\" maxlength=\"1\" placeholder=\"X\">", item.OuterHtml);
 
         cut.SetParametersAndRender(pb =>
         {
             pb.Add(a => a.Type, OtpInputType.Password);
             pb.Add(a => a.PlaceHolder, null);
         });
-        item = cut.Find(".bb-opt-item");
-        Assert.Equal("<input type=\"password\" class=\"bb-opt-item\" maxlength=\"1\">", item.OuterHtml);
+        item = cut.Find(".bb-otp-item");
+        Assert.Equal("<input type=\"password\" class=\"bb-otp-item\" maxlength=\"1\">", item.OuterHtml);
     }
 
     [Fact]

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@`
`36`	`36`	`font-weight: 400;`
`37`	`37`	`}`
`38`	`38`
`39`		`-::deep .bb-opt-input .bb-opt-item {`
`40`		`- --bb-opt-item-width: 50px;`
`41`		`- --bb-opt-font-size: 2em;`
	`39`	`+::deep .bb-otp-input .bb-otp-item {`
	`40`	`+ --bb-otp-item-width: 50px;`
	`41`	`+ --bb-otp-font-size: 2em;`
`42`	`42`	`}`