feat(Slider): remove InputGroup cascade parameter (#5170)

* refactor: 精简逻辑移除对 InputGroup 依赖 * style: 增加 InputGroup 兼容样式 * doc: 更新示例代码
dotnetcore · Jan 21, 2025 · 1c0f564 · 1c0f564
1 parent da655c5
commit 1c0f564
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 31 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Sliders.razor b/src/BootstrapBlazor.Server/Components/Samples/Sliders.razor
@@ -70,14 +70,13 @@
         <BootstrapInputGroup>
             <BootstrapInputGroupLabel DisplayText="@DisplayText" />
             <Slider @bind-Value="@CurrentValue" Max="MaxValue" Min="MinValue" Step="Step" UseInputEvent="UseInput"
-                    DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged" />
-
+                    DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged"></Slider>
         </BootstrapInputGroup>
     }
     else
     {
         <Slider @bind-Value="@CurrentValue" Max="MaxValue" Min="MinValue" Step="Step" UseInputEvent="UseInput"
-                DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged" />
+                DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged"></Slider>
     }
     <section ignore>
         <ConsoleLogger @ref="Logger" />

diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss b/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss
@@ -61,14 +61,23 @@
 
     > .form-check {
         --bb-form-check-padding: 0.375rem 0.75rem;
+        display: flex;
+        align-items: center;
+        padding: var(--bb-form-check-padding);
+    }
+
+    > .form-range {
+        --bb-form-range-padding: 0.375rem 0.75rem;
+        height: var(--bb-height);
+        padding: var(--bb-form-range-padding);
+    }
+
+    > .form-check, .form-range {
         border: 1px solid var(--bs-border-color);
         border-radius: var(--bs-border-radius);
         flex-grow: 1;
         width: 1%;
         min-width: 0;
-        display: flex;
-        align-items: center;
-        padding: var(--bb-form-check-padding);
 
         &:hover {
             border: 1px solid var(--bb-border-hover-color);

diff --git a/src/BootstrapBlazor/Components/Slider/Slider.razor b/src/BootstrapBlazor/Components/Slider/Slider.razor
@@ -7,18 +7,5 @@
 {
     <BootstrapLabel Value="@DisplayText" ShowLabelTooltip="ShowLabelTooltip" for="@Id" />
 }
-@if (InputGroup == null)
-{
-    @RenderRange
-}
-else
-{
-    <div class="form-control range-group">
-        @RenderRange
-    </div>
-}
 
-@code {
-    RenderFragment RenderRange =>
-    @<input type="range" id="@Id" @attributes="@AdditionalAttributes" class="@ClassString" disabled="@IsDisabled" @bind-value="CurrentValueAsString" @bind-value:event="@EventString" step="@StepString" min="@MinString" max="@MaxString" @onblur="OnBlur">;
-}
+<input @attributes="@AdditionalAttributes" type="range" id="@Id" class="@ClassString" disabled="@IsDisabled" @bind-value="CurrentValueAsString" @bind-value:event="@EventString" step="@StepString" min="@MinString" max="@MaxString" @onblur="OnBlur">
diff --git a/src/BootstrapBlazor/Components/Slider/Slider.razor.scss b/src/BootstrapBlazor/Components/Slider/Slider.razor.scss
@@ -1,13 +1,3 @@
-.range-group {
-    display: flex;
-    align-items: center;
-    --bb-form-range-height: #{$bb-form-range-height};
-
-    .form-range {
-        height: var(--bb-form-range-height);
-    }
-}
-
 .row {
     --bb-form-range-margin-top: #{$bb-form-range-margin-top};
 

diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -536,7 +536,6 @@ $bb-skeleton-gradient-from-color: rgba(var(--bs-body-color-rgb), 0.06);
 $bb-skeleton-gradient-to-color: rgba(var(--bs-body-color-rgb), 0.15);
 
 // Slider
-$bb-form-range-height: 1rem;
 $bb-form-range-margin-top: 6px;
 
 // Speech