Add container class property to BSInputSwitch (#586)

* Add option to add extra classes to the div container surrounding the input with ContainerClass property * Update docs
chanan · May 17, 2023 · f402aaf · f402aaf
1 parent 0594e8b
commit f402aaf
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 4 deletions.
diff --git a/src/BlazorStrap-Docs/wwwroot/Static/V4/Forms/Checkbox.md b/src/BlazorStrap-Docs/wwwroot/Static/V4/Forms/Checkbox.md
@@ -14,6 +14,7 @@ See [shared](layout/shared) for additional parameters
 | IsOutlined       | bool           | true-false     | `.btn-outline-[]`         |
 | IsReadonly       | bool           | true/false     | `readonly`                |
 | IsToggle         | bool           | true/false     | Toggle Button             |
+| ContainerClass   | string         | string         | custom class to add to `custom-control custom-switch` |
 
 :::
 `@("value")` is not required it's a line declaration of a string to make the demo work

diff --git a/src/BlazorStrap-Docs/wwwroot/Static/V5/Forms/Checkbox.md b/src/BlazorStrap-Docs/wwwroot/Static/V5/Forms/Checkbox.md
@@ -14,6 +14,7 @@ See [shared](layout/shared) for additional parameters
 | IsOutlined       | bool           | true-false     | `.btn-outline-[]`         |
 | IsReadonly       | bool           | true/false     | `readonly`                |
 | IsToggle         | bool           | true/false     | Toggle Button             |
+| ContainerClass   | string         | string         | custom class to add to `form-check form-switch` |
 
 :::
 `@("value")` is not required it's a line declaration of a string to make the demo work

diff --git a/src/BlazorStrap.V4/Components/Forms/BSInputSwitch.razor b/src/BlazorStrap.V4/Components/Forms/BSInputSwitch.razor
@@ -2,7 +2,7 @@
 @typeparam TValue
 @inherits BlazorStrap.Shared.Components.Forms.BSInputCheckboxBase<TValue>
 
-<div class="custom-control custom-switch">
+<div class="@ContainerClassBuilder">
     <input type="checkbox" class="@ClassBuilder" id="@Id" @onblur="OnBlurEvent" @onfocus="OnFocusEvent" checked="@Checked()" @onchange="RadioOnClickEvent" disabled="@IsDisabled">
     <label class="custom-control-label" for="@Id" >@ChildContent</label>
 </div>
diff --git a/src/BlazorStrap.V4/Components/Forms/BSInputSwitch.razor.cs b/src/BlazorStrap.V4/Components/Forms/BSInputSwitch.razor.cs
@@ -7,7 +7,7 @@ namespace BlazorStrap.V4
 {
     public partial class BSInputSwitch<TValue> : BSInputCheckboxBase<TValue>
     {
-        [Parameter] public string Id { get; set; } = Guid.NewGuid().ToString().Replace("-","");
+        [Parameter] public string Id { get; set; } = Guid.NewGuid().ToString().Replace("-", "");
         protected override string? ToggleClassBuilder => null;
 
         protected override string? LayoutClass => null;
@@ -19,5 +19,10 @@ public partial class BSInputSwitch<TValue> : BSInputCheckboxBase<TValue>
                 //.AddClass(LayoutClass, !string.IsNullOrEmpty(LayoutClass))
                 .AddClass(Class, !string.IsNullOrEmpty(Class))
                 .Build().ToNullString();
+
+        protected override string? ContainerClassBuilder => new CssBuilder()
+            .AddClass("custom-control custom-switch")
+            .AddClass(ContainerClass)
+            .Build().ToNullString();
     }
 }
diff --git a/src/BlazorStrap.V5/Components/Forms/BSInputSwitch.razor b/src/BlazorStrap.V5/Components/Forms/BSInputSwitch.razor
@@ -2,7 +2,7 @@
 @typeparam TValue
 @inherits BlazorStrap.Shared.Components.Forms.BSInputCheckboxBase<TValue>
 
-<div class="form-check form-switch">
+<div class="@ContainerClassBuilder">
     <input type="checkbox" class="@ClassBuilder" id="@Id" @onblur="OnBlurEvent" @onfocus="OnFocusEvent" checked="@Checked()" @onchange="RadioOnClickEvent" disabled="@IsDisabled">
     <label class="form-check-label" for="@Id" >@ChildContent</label>
 </div>
diff --git a/src/BlazorStrap.V5/Components/Forms/BSInputSwitch.razor.cs b/src/BlazorStrap.V5/Components/Forms/BSInputSwitch.razor.cs
@@ -19,5 +19,10 @@ public partial class BSInputSwitch<TValue> : BSInputCheckboxBase<TValue>
                 .AddClass(LayoutClass, !string.IsNullOrEmpty(LayoutClass))
                 .AddClass(Class, !string.IsNullOrEmpty(Class))
                 .Build().ToNullString();
+
+        protected override string? ContainerClassBuilder => new CssBuilder()
+            .AddClass("form-check form-switch")
+            .AddClass(ContainerClass)
+            .Build().ToNullString();
     }
 }
diff --git a/src/BlazorStrap/Shared/Components/Forms/BSInputCheckboxBase.cs b/src/BlazorStrap/Shared/Components/Forms/BSInputCheckboxBase.cs
@@ -26,7 +26,12 @@ public abstract class BSInputCheckboxBase<T> : BSInputBase<T>
         /// Value of <typeparamref name="T"/> when input is unchecked.
         /// </summary>
         [Parameter] public virtual T? UnCheckedValue { get; set; }
-
+
+        /// <summary>
+        /// CSS classes to add to div container of the input.
+        /// </summary>
+        [Parameter] public string? ContainerClass { get; set; }
+
         protected bool IsRadio { get; set; }
 
         protected bool _isToggle;
@@ -35,6 +40,7 @@ public abstract class BSInputCheckboxBase<T> : BSInputBase<T>
 
 
         protected abstract string? ToggleClassBuilder { get; }
+        protected abstract string? ContainerClassBuilder { get; }
 
         protected void RadioOnClickEvent()
         {