-Dimension can not be smaller than 0 nor greater than 100 (#294)

-Added StartContentStyle property
-Added EndContentStyle property
-Added ContentStyle property
-Added BarStyle property
-Deprecated StyleContent property
-Deprecated StyleBar property
-Removed OnInitializedAsync as it is not needed
-Removed deprecated properties

Author: Yomodo

CodeBeam.MudBlazor.Extensions/Components/Splitter/MudSplitter.razor

@@ -6,10 +6,10 @@
                T="double" Min="0" Max="100" Step="@Sensitivity" Disabled="@(!EnableSlide)"
                Class="@SliderClassname" Style="overflow: hidden; z-index: 6" />
 
-    <div class="@ContentClassname" style="@StyleContent">
+    <div class="@ContentClassname" style="@EffectiveStartStyle">
         @StartContent
     </div>
-    <div class="@ContentClassname" style="@StyleContent">
+    <div class="@ContentClassname" style="@EffectiveEndStyle">
         @EndContent
     </div>
 </div>
@@ -18,18 +18,18 @@
     @($".mud-splitter-generate-{_styleGuid} {{ grid-template-columns: {Dimension.ToInvariantString()}% {(100 - Dimension).ToInvariantString()}%; }}")
 
     .mud-splitter-thumb-@(_styleGuid) ::-webkit-slider-thumb {
-        @(Color == Color.Default ? "background-color: var(--mud-palette-action-default) !important;" : $"background-color: var(--mud-palette-{Color.ToDescriptionString()}) !important;")
-        @(Height != null ? $"height: {Height} !important;" : null)
-        @(StyleBar)
+        @EffectiveColor
+        @EffectiveHeight
+        @EffectiveBarStyle
     }
 
-    .mud-splitter-thumb-@(_styleGuid) ::-moz-range-thumb {
-        @(Color == Color.Default ? "background-color: var(--mud-palette-action-default) !important;" : $"background-color: var(--mud-palette-{Color.ToDescriptionString()}) !important;")
-        @(Height != null ? $"height: {Height} !important;" : null)
-        @(StyleBar)
+    .mud-splitter-thumb-@_styleGuid ::-moz-range-thumb {
+        @EffectiveColor
+        @EffectiveHeight
+        @EffectiveBarStyle
     }
 
-    .mud-splitter-content-@(_styleGuid) {
-        @(Height != null ? $"height: {Height};" : null)
+    .mud-splitter-content-@_styleGuid {
+        @($"height: {(!string.IsNullOrWhiteSpace(Height) ? Height : "0px ")} !important;")
     }
 </style>

CodeBeam.MudBlazor.Extensions/Components/Splitter/MudSplitter.razor.cs

@@ -8,7 +8,7 @@ namespace MudExtensions
     public partial class MudSplitter : MudComponentBase
     {
 
-        Guid _styleGuid = Guid.NewGuid();
+        readonly Guid _styleGuid = Guid.NewGuid();
         MudSlider<double> _slider;
 
         protected string Classname => new CssBuilder("mud-splitter")
@@ -34,7 +34,7 @@ public partial class MudSplitter : MudComponentBase
 
         //string _height;
         /// <summary>
-        /// The height of splitter.
+        /// The height of splitter. For example: "400px"
         /// </summary>
         [Parameter]
         public string Height { get; set; }
@@ -54,50 +54,62 @@ public partial class MudSplitter : MudComponentBase
         /// <summary>
         /// The two contents' (sections) styles, seperated by space.
         /// </summary>
+        [Obsolete("StyleContent is deprecated, please use property ContentStyle, StartContentStyle or EndContentStyle to set the style.")]
         [Parameter]
         public string StyleContent { get; set; }
 
         /// <summary>
-        /// The splitter bar's styles, seperated by space. All styles have to include !important and end with ';'
+        /// The style to apply to both content sections, seperated by space.
+        /// </summary>
+        [Parameter]
+        public string ContentStyle { get; set; }
+
+        /// <summary>
+        /// The style of the <see cref="StartContent"/>, seperated by space. Overrules <see cref=" StyleContent"/>
         /// </summary>
         [Parameter]
+        public string StartContentStyle { get; set; }
+
+        /// <summary>
+        /// The style of the <see cref="EndContent"/>, seperated by space. Overrules <see cref=" StyleContent"/>
+        /// </summary>
+        [Parameter]
+        public string EndContentStyle { get; set; }
+
+        /// <summary>
+        /// The splitter bar's styles, seperated by space. The style string should end with: "!important;"
+        /// </summary>
+        [Obsolete("StyleBar is deprecated, please use property BarStyle to set the bar's style.")]
+        [Parameter]
         public string StyleBar { get; set; } = "width:2px !important;";
 
+        /// <summary>
+        /// The splitter bar's styles, seperated by space. The style string should end with: "!important;"
+        /// </summary>
+        /// <remarks>The default is 2px</remarks>
+        [Parameter]
+        public string BarStyle { get; set; } = "width:2px !important;";
+
         /// <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;
 
-        [Obsolete("DisableSlide is deprecated, please use property EnableSlide to set Slide.")]
-        [Parameter]
-        public bool DisableSlide
-        {
-            get { return !EnableSlide; }
-            set { EnableSlide = !value; }
-        }
         /// <summary>
         /// If true, user can interact with splitter bar.
-        /// Default is true.
         /// </summary>
+        /// <remarks>The default is true</remarks>
         [Parameter]
         public bool EnableSlide { get; set; } = true;
 
-        [Obsolete("DisableMargin is deprecated, please use property EnableMargin to set Margin.")]
-        [Parameter]
-        public bool DisableMargin
-        {
-            get { return !EnableMargin; }
-            set { EnableMargin = !value; }
-        }
         /// <summary>
         /// Enables the default margin.
-        /// Default is true.
         /// </summary>
+        /// <remarks>The default is true, which adds class: "ma-2"</remarks>
         [Parameter]
         public bool EnableMargin { get; set; } = true;
 
-
         ///// <summary>
         ///// If true, splitter bar goes vertical.
         ///// </summary>
@@ -110,11 +122,11 @@ public bool DisableMargin
         [Parameter]
         public RenderFragment EndContent { get; set; }
 
-
         /// <summary>
         /// The start content's percentage.
         /// Default is 50.
         /// </summary>
+        /// <remarks>The default is 50</remarks>
         [Parameter]
         public double Dimension { get; set; } = 50;
 
@@ -124,30 +136,35 @@ public bool DisableMargin
         [Parameter]
         public EventCallback OnDoubleClicked { get; set; }
 
-        protected override async Task OnInitializedAsync()
-        {
-            await base.OnInitializedAsync();
-            await UpdateDimension(Dimension);
-        }
 
-        protected async Task UpdateDimension(double percentage)
+        string EffectiveStartStyle { get { return !string.IsNullOrWhiteSpace(StartContentStyle) ? StartContentStyle : !string.IsNullOrWhiteSpace(ContentStyle) ? ContentStyle : StyleContent; } }
+        string EffectiveEndStyle { get { return !string.IsNullOrWhiteSpace(EndContentStyle) ? EndContentStyle : !string.IsNullOrWhiteSpace(ContentStyle) ? ContentStyle : StyleContent; } }
+        string EffectiveHeight { get { return $"height:{(!string.IsNullOrWhiteSpace(Height) ? Height : "0px")} !important;"; } }
+        string EffectiveBarStyle { get { return !string.IsNullOrWhiteSpace(BarStyle) ? BarStyle : StyleBar; } }
+        string EffectiveColor { get { return $"background-color:var(--mud-palette-{(Color == Color.Default ? "action-default" : Color.ToDescriptionString())}) !important;"; } }
+
+
+        protected Task UpdateDimension(double percentage)
         {
             Dimension = percentage;
-            if (DimensionChanged.HasDelegate)
-                await DimensionChanged.InvokeAsync(percentage);
-        }
 
-        /// <summary>
-        /// Updates the dimension with given the start content's percentage
-        /// </summary>
-        /// <param name="percentage"></param>
-        [Obsolete("SetDimensions is deprecated, please use property Dimension to set start content's percentage.")]
-        public Task SetDimensions(double percentage) => UpdateDimension(percentage);
+            if (Dimension < 0)
+                Dimension = 0;
+            else if (Dimension > 100)
+                Dimension = 100;
 
-        async Task OnDoubleClick()
+            if (DimensionChanged.HasDelegate)
+                _ = DimensionChanged.InvokeAsync(percentage);
+
+            return Task.CompletedTask;
+        }
+        
+        Task OnDoubleClick()
         {
             if (OnDoubleClicked.HasDelegate)
-                await OnDoubleClicked.InvokeAsync();
+                _ = OnDoubleClicked.InvokeAsync();
+
+            return Task.CompletedTask;
         }
     }
 }