feat(ListView): use grid layout instead of flex (#5409)

ArgoZhang · web-flow · commit e1a8f5367736 · 2025-02-21T00:30:40.000Z
* refactor: 复用代码

* refactor: 改用 grid 布局

* doc: 更新示例
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor b/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor
@@ -17,7 +17,7 @@
         <BodyTemplate>
             <Card>
                 <BodyTemplate>
-                    <img src="@context.ImageUrl" />
+                    <img class="lv-demo-img" src="@context.ImageUrl" />
                     <div class="lv-demo-desc">@context.Description</div>
                 </BodyTemplate>
             </Card>
@@ -42,7 +42,7 @@
         <BodyTemplate>
             <Card>
                 <BodyTemplate>
-                    <img src="@context.ImageUrl" />
+                    <img class="lv-demo-img" src="@context.ImageUrl" />
                     <div class="lv-demo-desc">@context.Description</div>
                 </BodyTemplate>
             </Card>
@@ -60,7 +60,7 @@
         <BodyTemplate>
             <Card>
                 <BodyTemplate>
-                    <img src="@context.ImageUrl" />
+                    <img class="lv-demo-img" src="@context.ImageUrl" />
                     <div class="lv-demo-desc">@context.Description</div>
                 </BodyTemplate>
             </Card>
@@ -78,7 +78,7 @@
         <BodyTemplate>
             <Card>
                 <BodyTemplate>
-                    <img src="@context.ImageUrl" />
+                    <img class="lv-demo-img" src="@context.ImageUrl" />
                     <div class="lv-demo-desc">@context.Description</div>
                 </BodyTemplate>
             </Card>
@@ -96,7 +96,7 @@
         <BodyTemplate>
             <Card>
                 <BodyTemplate>
-                    <img src="@context.ImageUrl" />
+                    <img class="lv-demo-img" src="@context.ImageUrl" />
                     <div class="lv-demo-desc">@context.Description</div>
                 </BodyTemplate>
             </Card>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor.css b/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor.css
@@ -1,5 +1,5 @@
-﻿img {
-    margin-bottom: 1rem;
+﻿.lv-demo-img {
+    width: 100%;
     border-radius: var(--bs-border-radius);
 }
 
diff --git a/src/BootstrapBlazor/Components/ListView/ListView.razor b/src/BootstrapBlazor/Components/ListView/ListView.razor
@@ -16,12 +16,7 @@
             {
                 if (GroupName == null)
                 {
-                    foreach (var item in Rows)
-                    {
-                        <div class="listview-item" @onclick="@(e => OnClick(item))">
-                            @BodyTemplate(item)
-                        </div>
-                    }
+                    @RenderGroup(Rows)
                 }
                 else if (Collapsible)
                 {
@@ -38,12 +33,7 @@
                         <div @key="@key.GroupName" class="accordion-item">
                             <div class="accordion-header">@key.GroupName</div>
                             <div class="accordion-body">
-                                @foreach (var item in key.Items)
-                                {
-                                    <div class="listview-item" @onclick="@(e => OnClick(item))">
-                                        @BodyTemplate(item)
-                                    </div>
-                                }
+                                @RenderGroup(key.Items)
                             </div>
                         </div>
                     }
@@ -77,14 +67,19 @@
 @code {
     RenderFragment RenderItem((object? GroupName, IOrderedEnumerable<TItem> Items) key, int index) =>
     @<CollapseItem Text="@GetGroupName(key.GroupName)" IsCollapsed="IsCollapsed(index, key.GroupName)">
-        @foreach (var item in key.Items)
+        @RenderGroup(key.Items)
+    </CollapseItem>;
+
+    RenderFragment<IEnumerable<TItem>> RenderGroup => items =>
+    @<div class="listview-item-group">
+        @foreach (var item in items)
         {
-            <div class="listview-item" @onclick="@(e => OnClick(item))">
+            <div @key="item" class="listview-item" @onclick="@(e => OnClick(item))">
                 @if(BodyTemplate != null)
                 {
                     @BodyTemplate(item)
                 }
             </div>
         }
-    </CollapseItem>;
+    </div>;
 }
diff --git a/src/BootstrapBlazor/Components/ListView/ListView.razor.cs b/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();
 
diff --git a/src/BootstrapBlazor/Components/ListView/ListView.razor.scss b/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);
 }
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/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;

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-img {`
`2`		`- margin-bottom: 1rem;`
	`1`	`+.lv-demo-img {`
	`2`	`+ width: 100%;`
`3`	`3`	`border-radius: var(--bs-border-radius);`
`4`	`4`	`}`
`5`	`5`
Original file line number	Diff line number	Diff line change
`@@ -16,12 +16,7 @@`
`16`	`16`	`{`
`17`	`17`	`if (GroupName == null)`
`18`	`18`	`{`
`19`		`- foreach (var item in Rows)`
`20`		`- {`
`21`		`- <div class="listview-item" @onclick="@(e => OnClick(item))">`
`22`		`- @BodyTemplate(item)`
`23`		`- </div>`
`24`		`- }`
	`19`	`+ @RenderGroup(Rows)`
`25`	`20`	`}`
`26`	`21`	`else if (Collapsible)`
`27`	`22`	`{`
`@@ -38,12 +33,7 @@`
`38`	`33`	`<div @key="@key.GroupName" class="accordion-item">`
`39`	`34`	`<div class="accordion-header">@key.GroupName</div>`
`40`	`35`	`<div class="accordion-body">`
`41`		`- @foreach (var item in key.Items)`
`42`		`- {`
`43`		`- <div class="listview-item" @onclick="@(e => OnClick(item))">`
`44`		`- @BodyTemplate(item)`
`45`		`- </div>`
`46`		`- }`
	`36`	`+ @RenderGroup(key.Items)`
`47`	`37`	`</div>`
`48`	`38`	`</div>`
`49`	`39`	`}`
`@@ -77,14 +67,19 @@`
`77`	`67`	`@code {`
`78`	`68`	`RenderFragment RenderItem((object? GroupName, IOrderedEnumerable<TItem> Items) key, int index) =>`
`79`	`69`	`@<CollapseItem Text="@GetGroupName(key.GroupName)" IsCollapsed="IsCollapsed(index, key.GroupName)">`
`80`		`- @foreach (var item in key.Items)`
	`70`	`+ @RenderGroup(key.Items)`
	`71`	`+ </CollapseItem>;`
	`72`	`+`
	`73`	`+ RenderFragment<IEnumerable<TItem>> RenderGroup => items =>`
	`74`	`+ @<div class="listview-item-group">`
	`75`	`+ @foreach (var item in items)`
`81`	`76`	`{`
`82`		`- <div class="listview-item" @onclick="@(e => OnClick(item))">`
	`77`	`+ <div @key="item" class="listview-item" @onclick="@(e => OnClick(item))">`
`83`	`78`	`@if(BodyTemplate != null)`
`84`	`79`	`{`
`85`	`80`	`@BodyTemplate(item)`
`86`	`81`	`}`
`87`	`82`	`</div>`
`88`	`83`	`}`
`89`		`- </CollapseItem>;`
	`84`	`+ </div>;`
`90`	`85`	`}`