🆕 (Divider): add the Length property to support custom line length (#1913)

* 🆕 (Divider): add the Length property to support custom line length

* add Nuget.Config

* add Nuget.Config

NuGet.Config

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <config>
+    <add key="defaultPushSource" value="https://api.nuget.org/v3/index.json" />
+  </config>
+  <packageSources>
+    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" protocolVersion="3" />
+  </packageSources>
+</configuration>

docs/Masa.Blazor.Docs/Examples/components/dividers/ChildContent.razor

@@ -6,7 +6,7 @@
 
 <MDivider Right>Right</MDivider>
 
-<MDivider Height="40">
+<MDivider Class="my-2">
     <MIcon Color="red" Left Style="line-height: inherit;">mdi-heart</MIcon>
     Favorites
 </MDivider>

docs/Masa.Blazor.Docs/Examples/components/dividers/Vertical.razor

@@ -1,7 +1,7 @@
 <MToolbar Color="purple" Dark>
     <MToolbarTitle>Title</MToolbarTitle>
 
-    <MDivider Vertical Class="mx-4"></MDivider>
+    <MDivider Vertical Class="mx-4 my-auto" Length="30"></MDivider>
 
     <span class="subheading">My Home</span>
 
@@ -23,3 +23,4 @@
 
     <MAppBarNavIcon></MAppBarNavIcon>
 </MToolbar>
+

docs/Masa.Blazor.Docs/wwwroot/data/nav.json

@@ -110,7 +110,10 @@
       "defaults-providers",
       "descriptions",
       "dialogs",
-      "dividers",
+      {
+        "title": "dividers",
+        "state": "update"
+      },
       "drawers",
       {
         "title": "echarts",

docs/Masa.Blazor.Docs/wwwroot/pages/components/dividers/en-US.md

@@ -19,13 +19,13 @@ Dividers in their simplest form display a horizontal line.
 
 #### Inset
 
-Dividers in their simplest form display a horizontal line.
+Inset dividers are moved 72px to the right. This will cause them to line up with list items.
 
 <masa-example file="Examples.components.dividers.Inset"></masa-example>
 
-#### Vertical
+#### Vertical {updated-in=v1.6.0}
 
-Dividers in their simplest form display a horizontal line.
+Vertical dividers give you more tools for unique layouts. Use `Length` to control the length of the divider.
 
 <masa-example file="Examples.components.dividers.Vertical"></masa-example>
 

docs/Masa.Blazor.Docs/wwwroot/pages/components/dividers/zh-CN.md

@@ -23,9 +23,9 @@ related:
 
 <masa-example file="Examples.components.dividers.Inset"></masa-example>
 
-#### 垂直
+#### 垂直 {updated-in=v1.6.0}
 
-垂直分隔线为您提供了更多用于独特布局的工具。
+垂直分隔线为您提供了更多用于独特布局的工具。使用 `Length` 属性可以控制分隔线的长度。
 
 <masa-example file="Examples.components.dividers.Vertical"></masa-example>
 

docs/Masa.Docs.Shared/Components/Tabs.razor

@@ -34,7 +34,7 @@
 
     @if (_resourcesMenu.Any())
     {
-        <MDivider Vertical Class="ml-8 mr-4 my-auto" Style="height:16px" Inset/>
+        <MDivider Vertical Class="ml-8 mr-4 my-auto" Length="16" />
 
         <AppMenu Items="_resourcesMenu" TItem="DefaultItem" MinWidth="200">
             <ActivatorContent>

src/Masa.Blazor/Components/Divider/MDivider.razor.cs

@@ -10,16 +10,21 @@ public partial class MDivider : MasaComponentBase
 
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
-    [Parameter] [Obsolete("This parameter is little usefulness, it will be removed in the future.")]
+    [Parameter]
+    [Obsolete("This parameter will be removed in the future, please use CSS instead.")]
     public int Height { get; set; }
 
     [Parameter] public bool Left { get; set; }
 
     [Parameter] public bool Right { get; set; }
 
+    [Parameter] public int Length { get; set; }
+
     [Parameter] public bool Dark { get; set; }
 
-    [Parameter] public bool Light { get; set; }
+    [Parameter]
+    [MasaApiParameter(ReleasedOn = "v1.6.0")]
+    public bool Light { get; set; }
 
     [CascadingParameter(Name = "IsDark")] public bool CascadingIsDark { get; set; }
 
@@ -85,24 +90,32 @@ public partial class MDivider : MasaComponentBase
         return _wrapperModifierBuilder
             .Add(HasContent, Left, Right)
             .Add("center", IsCenter)
+            .AddClass(Class)
             .ToString();
     }
 
     private string? GetWrapperStyle()
     {
-        StringBuilder stringBuilder = new();
+        StyleBuilder styleBuilder = new();
 
         if (!HasContent)
         {
-            stringBuilder.Append("display:contents; ");
+            styleBuilder.Add("display:contents;");
+        }
+
+        if (Length > 0)
+        {
+            styleBuilder.AddLength(Vertical ? "height" : "width", Length);
         }
 
         if (PaddingY > 0)
         {
-            stringBuilder.Append("padding: {PaddingY}px 0;");
+            styleBuilder.Add($"padding: {PaddingY}px 0;");
         }
 
-        return stringBuilder.Length > 0 ? stringBuilder.ToString() : null;
+        styleBuilder.Add(Style);
+
+        return styleBuilder.ToString();
     }
 
     private string GetHRClass()
@@ -116,6 +129,18 @@ public partial class MDivider : MasaComponentBase
 
     private string? GetHRStyle()
     {
-        return !HasContent ? Style : null;
+        StyleBuilder styleBuilder = new();
+
+        if (!HasContent)
+        {
+            styleBuilder.Add(Style);
+        }
+
+        if (Vertical && Length > 0)
+        {
+            styleBuilder.AddLength("min-height", 0);
+        }
+
+        return styleBuilder.ToString();
     }
 }

src/Masa.Blazor/Core/Styles/StyleBuilder.cs

@@ -51,6 +51,11 @@ public struct StyleBuilder
         return this;
     }
 
+    public StyleBuilder AddLength(string name, double value, string unit = "px")
+    {
+        return Add(value == 0 ? $"{name}: 0" : $"{name}: {value}{unit}".ToString(CultureInfo.InvariantCulture));
+    }
+
     public IEnumerable<string> GenerateCssStyles()
     {
         yield return _stringBuilder.ToString();