refactor: 改用 grid 布局

Author: ArgoZhang

src/BootstrapBlazor/Components/ListView/ListView.razor.cs

@@ -15,7 +15,7 @@ public partial class ListView<TItem> : BootstrapComponentBase
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    private string? BodyClassString => CssBuilder.Default("listview-body")
+    private string? BodyClassString => CssBuilder.Default("listview-body scroll")
         .AddClass("is-group", GroupName != null)
         .Build();
 

src/BootstrapBlazor/Components/ListView/ListView.razor.scss

@@ -6,7 +6,7 @@
     --bb-lv-item-border-hover-color: #{$bb-lv-item-border-hover-color};
     --bb-lv-item-shadow: #{$bb-lv-item-shadow};
     --bb-lv-body-padding: #{$bb-lv-body-padding};
-    --bb-lv-body-item-margin: #{$bb-lv-body-item-margin};
+    --bb-lv-body-item-gap: #{$bb-lv-body-item-gap};
     --bb-lv-footer-padding: #{$bb-lv-footer-padding};
     border: 1px solid var(--bb-lv-border-color);
     border-radius: var(--bs-border-radius);
@@ -29,24 +29,17 @@
 .listview .listview-body {
     padding: var(--bb-lv-body-padding);
     position: relative;
-    overflow: auto;
-    display: flex;
-    flex-flow: row wrap;
     flex: 1;
-    align-content: flex-start;
-    height: 1%;
     min-height: 0;
+    height: 1%;
 }
 
 .listview .listview-body.is-group {
     padding: 0;
 }
 
-.listview .listview-body .listview-item {
-    margin: var(--bb-lv-body-item-margin);
-}
-
 .listview .listview-body .listview-item .card {
+    box-shadow: var(--bb-lv-item-shadow);
     transition: var(--bb-lv-item-trans);
 }
 
@@ -55,15 +48,11 @@
     border: 1px solid var(--bb-lv-item-border-hover-color);
 }
 
-.listview .listview-body .listview-item .card {
-    box-shadow: var(--bb-lv-item-shadow);
-}
-
-.listview .listview-body .listview-item-group {
-    flex-basis: 100%;
-    margin: 1rem 0;
-    font-weight: bold;
-    position: relative;
+.listview .listview-item-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--bb-lv-body-item-gap);
+    align-items: start;
 }
 
 .listview .listview-body .accordion {
@@ -82,15 +71,9 @@
 }
 
 .listview .listview-body .accordion-body {
-    display: flex;
-    flex-wrap: wrap;
     padding: var(--bb-lv-body-padding);
 }
 
-.listview .listview-body .accordion-item {
-    width: 100%;
-}
-
 .listview .listview-body .accordion-item:last-child .accordion-header {
     border-bottom: 1px solid var(--bb-lv-border-color);
 }

src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss

@@ -381,9 +381,9 @@ $bb-lv-border-color: var(--bs-border-color);
 $bb-lv-item-trans: border .3s linear;
 $bb-lv-item-border-hover-color: #409eff;
 $bb-lv-item-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-$bb-lv-body-padding: 1rem 0 0 1rem;
-$bb-lv-body-item-margin: 0 1rem 1rem 0;
-$bb-lv-footer-padding: 1rem;
+$bb-lv-body-padding: 0.5rem;
+$bb-lv-body-item-gap: 0.5rem;
+$bb-lv-footer-padding: 0.5rem;
 
 // Logout
 $bb-logout-avatar-width: 42px;