Splitter Enhancements (#75)

Author: mckaragoz

CodeBeam.MudExtensions/Components/Splitter/MudSplitter.razor

@@ -2,7 +2,7 @@
 @inherits MudComponentBase
 
 <div class="@Classname" style="@Style">
-    <MudSlider @ref="_slider" Class="@SliderClassname" T="double" Min="0" Max="100" Step="0.1" ValueChanged="UpdateDimensions" />
+    <MudSlider @ref="_slider" Class="@SliderClassname" Style="overflow: hidden; z-index: 6" T="double" Min="0" Max="100" Step="@Sensitivity" ValueChanged="UpdateDimensions" Disabled="DisableSlide"/>
 
     <div class="@ContentClassname" style="@StyleContent">
         @StartContent

CodeBeam.MudExtensions/Components/Splitter/MudSplitter.razor.cs

@@ -25,7 +25,8 @@ public partial class MudSplitter : MudComponentBase
             .AddClass(Class)
             .Build();
 
-        protected string ContentClassname => new CssBuilder($"mud-splitter-content mud-splitter-content-{_styleGuid} d-flex ma-2")
+        protected string ContentClassname => new CssBuilder($"mud-splitter-content mud-splitter-content-{_styleGuid} d-flex")
+            .AddClass("ma-2", !DisableMargin)
             .AddClass(ClassContent)
             .Build();
 
@@ -81,6 +82,24 @@ public string Height
         [Parameter]
         public string StyleBar { get; set; }
 
+        /// <summary>
+        /// The slide sensitivity that should between 0.01 and 10. Smaller values increase the smooth but reduce performance. Default is 0.1
+        /// </summary>
+        [Parameter]
+        public double Sensitivity { get; set; } = 0.1d;
+
+        /// <summary>
+        /// If true, user cannot interact with splitter bar.
+        /// </summary>
+        [Parameter]
+        public bool DisableSlide { get; set; }
+
+        /// <summary>
+        /// Disables the default margin.
+        /// </summary>
+        [Parameter]
+        public bool DisableMargin { get; set; }
+
         ///// <summary>
         ///// If true, splitter bar goes vertical.
         ///// </summary>

ComponentViewer.Docs/Pages/Examples/SplitterExample1.razor

@@ -3,7 +3,7 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8">
-        <MudSplitter @ref="_splitter" Height="@_height" Color="_color" Bordered="_bordered" DimensionChanged="DimensionChanged">
+        <MudSplitter @ref="_splitter" Height="@_height" Color="_color" Bordered="_bordered" DimensionChanged="DimensionChanged" DisableSlide="_disableSlide" DisableMargin="_disableMargin" Sensitivity="_sensitivity" Overlap="true">
             <StartContent>
                 <MudText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</MudText>
             </StartContent>
@@ -23,8 +23,11 @@
                     <MudSelectItem Value="col">@col.ToDescriptionString()</MudSelectItem>
                 }
             </MudSelect>
-            <MudSwitch @bind-Checked="_bordered" Color="Color.Primary" Label="Border" />
+            <MudSwitchM3 @bind-Checked="_bordered" Color="Color.Primary" Label="Border" />
+            <MudSwitchM3 @bind-Checked="_disableSlide" Color="Color.Primary" Label="Disable" />
+            <MudSwitchM3 @bind-Checked="_disableMargin" Color="Color.Primary" Label="Disable Margin" />
             <MudDivider />
+            <MudNumericField @bind-Value="_sensitivity" Variant="Variant.Outlined" Min="0.01" Max="10" Step="0.1" Label="Sensitivity" />
             <MudNumericField @bind-Value="_percentage" Variant="Variant.Outlined" Label="Start Content Percentage" />
             <MudButton OnClick="@(() => _splitter.SetDimensions(_percentage))">Set Dimension (@_percentage)</MudButton>
         </MudStack>
@@ -37,6 +40,9 @@
     Color _color;
     double _percentage = 50;
     bool _bordered = false;
+    bool _disableSlide = false;
+    bool _disableMargin = false;
+    double _sensitivity = 0.1d;
 
     private void DimensionChanged()
     {