feat(Menu): redesign collapse logic (#4672)

* refactor: 更改样式名称 * refactor: 更新 Menu 透明样式 * refactor: 精简样式 * test: 更新单元测试
dotnetcore · Nov 16, 2024 · 9a09c24 · 9a09c24
1 parent 624ade0
commit 9a09c24
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 30 deletions.
diff --git a/src/BootstrapBlazor/Components/Menu/Menu.razor.cs b/src/BootstrapBlazor/Components/Menu/Menu.razor.cs
@@ -16,7 +16,6 @@ public partial class Menu
     protected string? ClassString => CssBuilder.Default("menu")
         .AddClass("is-bottom", IsBottom)
         .AddClass("is-vertical", IsVertical)
-        .AddClass("is-collapsed", IsVertical && IsCollapsed)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 

diff --git a/src/BootstrapBlazor/Components/Menu/Menu.razor.scss b/src/BootstrapBlazor/Components/Menu/Menu.razor.scss
@@ -99,14 +99,15 @@
     transform: rotate(-90deg);
 }
 
-.menu .text {
+.menu .menu-text {
     overflow: hidden;
     vertical-align: top;
     display: inline-block;
-    transition: width .3s linear;
+    opacity: 1;
+    transition: opacity .3s linear;
 }
 
-.menu .nav .nav-link .text {
+.menu .nav .nav-link .menu-text {
     margin-left: 4px;
 }
 
@@ -162,7 +163,7 @@
     transform: rotate(-90deg);
 }
 
-.menu .submenu .nav-link .text,
+.menu .submenu .nav-link .menu-text,
 .menu .submenu .nav-link .widget {
     margin: 0 4px;
 }
@@ -179,12 +180,6 @@
     background-image: none;
 }
 
-@media (min-width: 768px) {
-    .layout-side.is-collapsed:not(:hover) .menu.is-collapsed .submenu .text {
-        width: 0;
-    }
-}
-
 .menu.is-bottom {
     position: absolute;
     bottom: 0;

diff --git a/src/BootstrapBlazor/Components/Menu/MenuLink.razor b/src/BootstrapBlazor/Components/Menu/MenuLink.razor
@@ -13,7 +13,7 @@ else
     <NavLink @attributes="@AdditionalAttributes" @onclick:preventDefault="@PreventDefault" class="@ClassString" href="@HrefString" target="@TargetString" Match="@ItemMatch" style="@StyleClassString" aria-expanded="@AriaExpandedString">
         <div class="flex-fill">
             <i class="@IconString"></i>
-            <span class="text">@Item.Text</span>
+            <span class="menu-text">@Item.Text</span>
         </div>
         @if (Item.Template != null)
         {

diff --git a/src/BootstrapBlazor/Components/Menu/TopMenu.razor b/src/BootstrapBlazor/Components/Menu/TopMenu.razor
@@ -11,7 +11,7 @@
                     {
                         <i class="@GetIconString(menu.Icon)"></i>
                     }
-                    <span class="text">@menu.Text</span>
+                    <span class="menu-text">@menu.Text</span>
                 </a>
                 @if (!menu.IsDisabled)
                 {

diff --git a/test/UnitTest/Components/MenuTest.cs b/test/UnitTest/Components/MenuTest.cs
@@ -216,23 +216,6 @@ public void IndentSize_Ok()
         Assert.Contains("padding-left: 32px;", cut.Markup);
     }
 
-    [Fact]
-    public void IsCollapsed_Ok()
-    {
-        var cut = Context.RenderComponent<Menu>(pb =>
-        {
-            pb.Add(m => m.Items, Items);
-            pb.Add(m => m.IsCollapsed, true);
-        });
-        Assert.DoesNotContain("is-collapsed", cut.Markup);
-
-        cut.SetParametersAndRender(pb =>
-        {
-            pb.Add(m => m.IsVertical, true);
-        });
-        Assert.Contains("is-collapsed", cut.Markup);
-    }
-
     [Fact]
     public void IsDisabled_Ok()
     {