Skip to content

Commit 0c035d2

Browse files
ArgoZhangArgoZhang
authored
revert(ListView): revert grid layout (#5424)
* Revert "feat(ListView): use grid layout instead of flex (#5409)" This reverts commit e1a8f53. * refactor: 更改方法名称 * refactor: 代码复用 * refactor: 更新滚动条样式
1 parent f3463e5 commit 0c035d2

File tree

6 files changed

+60
-38
lines changed

6 files changed

+60
-38
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/ListViews.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<BodyTemplate>
1818
<Card>
1919
<BodyTemplate>
20-
<img class="lv-demo-img" src="@context.ImageUrl" />
20+
<img src="@context.ImageUrl" />
2121
<div class="lv-demo-desc">@context.Description</div>
2222
</BodyTemplate>
2323
</Card>
@@ -42,7 +42,7 @@
4242
<BodyTemplate>
4343
<Card>
4444
<BodyTemplate>
45-
<img class="lv-demo-img" src="@context.ImageUrl" />
45+
<img src="@context.ImageUrl" />
4646
<div class="lv-demo-desc">@context.Description</div>
4747
</BodyTemplate>
4848
</Card>
@@ -60,7 +60,7 @@
6060
<BodyTemplate>
6161
<Card>
6262
<BodyTemplate>
63-
<img class="lv-demo-img" src="@context.ImageUrl" />
63+
<img src="@context.ImageUrl" />
6464
<div class="lv-demo-desc">@context.Description</div>
6565
</BodyTemplate>
6666
</Card>
@@ -78,7 +78,7 @@
7878
<BodyTemplate>
7979
<Card>
8080
<BodyTemplate>
81-
<img class="lv-demo-img" src="@context.ImageUrl" />
81+
<img src="@context.ImageUrl" />
8282
<div class="lv-demo-desc">@context.Description</div>
8383
</BodyTemplate>
8484
</Card>
@@ -96,7 +96,7 @@
9696
<BodyTemplate>
9797
<Card>
9898
<BodyTemplate>
99-
<img class="lv-demo-img" src="@context.ImageUrl" />
99+
<img src="@context.ImageUrl" />
100100
<div class="lv-demo-desc">@context.Description</div>
101101
</BodyTemplate>
102102
</Card>

‎src/BootstrapBlazor.Server/Components/Samples/ListViews.razor.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
.lv-demo-img {
2-
width: 100%;
1+
img {
2+
margin-bottom: 1rem;
33
border-radius: var(--bs-border-radius);
44
}
55

‎src/BootstrapBlazor/Components/ListView/ListView.razor‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@
1616
{
1717
if (GroupName == null)
1818
{
19-
@RenderGroup(Rows)
19+
foreach (var item in Rows)
20+
{
21+
@RenderItem(item)
22+
}
2023
}
2124
else if (Collapsible)
2225
{
@@ -32,8 +35,11 @@
3235
{
3336
<div @key="@key.GroupName" class="accordion-item">
3437
<div class="accordion-header">@key.GroupName</div>
35-
<div class="accordion-body">
36-
@RenderGroup(key.Items)
38+
<div class="accordion-body scroll">
39+
@foreach (var item in key.Items)
40+
{
41+
@RenderItem(item)
42+
}
3743
</div>
3844
</div>
3945
}
@@ -65,21 +71,20 @@
6571
</div>
6672

6773
@code {
68-
RenderFragment RenderItem((object? GroupName, IOrderedEnumerable<TItem> Items) key, int index) =>
69-
@<CollapseItem Text="@GetGroupName(key.GroupName)" IsCollapsed="IsCollapsed(index, key.GroupName)">
70-
@RenderGroup(key.Items)
71-
</CollapseItem>;
7274

73-
RenderFragment<IEnumerable<TItem>> RenderGroup => items =>
74-
@<div class="listview-item-group">
75-
@foreach (var item in items)
76-
{
77-
<div @key="item" class="listview-item" @onclick="@(e => OnClick(item))">
78-
@if(BodyTemplate != null)
79-
{
80-
@BodyTemplate(item)
81-
}
82-
</div>
83-
}
84-
</div>;
75+
RenderFragment RenderGroupItem((object? GroupName, IOrderedEnumerable<TItem> Items) key, int index) =>
76+
@<CollapseItem Text="@GetGroupName(key.GroupName)" IsCollapsed="IsCollapsed(index, key.GroupName)">
77+
@foreach (var item in key.Items)
78+
{
79+
@RenderItem(item)
80+
}
81+
</CollapseItem>;
82+
83+
RenderFragment<TItem> RenderItem => item =>
84+
@<div @key="item" class="listview-item" @onclick="@(e => OnClick(item))">
85+
@if(BodyTemplate != null)
86+
{
87+
@BodyTemplate(item)
88+
}
89+
</div>;
8590
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ private RenderFragment RenderCollapsibleItems(Func<TItem, object?> groupFunc) =>
232232
foreach (var key in GetGroupItems(groupFunc))
233233
{
234234
var i = index++;
235-
builder.AddContent(i, RenderItem(key, i));
235+
builder.AddContent(i, RenderGroupItem(key, i));
236236
}
237237
};
238238

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

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
--bb-lv-item-border-hover-color: #{$bb-lv-item-border-hover-color};
77
--bb-lv-item-shadow: #{$bb-lv-item-shadow};
88
--bb-lv-body-padding: #{$bb-lv-body-padding};
9-
--bb-lv-body-item-gap: #{$bb-lv-body-item-gap};
9+
--bb-lv-body-item-margin: #{$bb-lv-body-item-margin};
1010
--bb-lv-footer-padding: #{$bb-lv-footer-padding};
1111
border: 1px solid var(--bb-lv-border-color);
1212
border-radius: var(--bs-border-radius);
@@ -29,17 +29,24 @@
2929
.listview .listview-body {
3030
padding: var(--bb-lv-body-padding);
3131
position: relative;
32+
overflow: auto;
33+
display: flex;
34+
flex-flow: row wrap;
3235
flex: 1;
33-
min-height: 0;
36+
align-content: flex-start;
3437
height: 1%;
38+
min-height: 0;
3539
}
3640

3741
.listview .listview-body.is-group {
3842
padding: 0;
3943
}
4044

45+
.listview .listview-body .listview-item {
46+
margin: var(--bb-lv-body-item-margin);
47+
}
48+
4149
.listview .listview-body .listview-item .card {
42-
box-shadow: var(--bb-lv-item-shadow);
4350
transition: var(--bb-lv-item-trans);
4451
}
4552

@@ -48,11 +55,15 @@
4855
border: 1px solid var(--bb-lv-item-border-hover-color);
4956
}
5057

51-
.listview .listview-item-group {
52-
display: grid;
53-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
54-
gap: var(--bb-lv-body-item-gap);
55-
align-items: start;
58+
.listview .listview-body .listview-item .card {
59+
box-shadow: var(--bb-lv-item-shadow);
60+
}
61+
62+
.listview .listview-body .listview-item-group {
63+
flex-basis: 100%;
64+
margin: 1rem 0;
65+
font-weight: bold;
66+
position: relative;
5667
}
5768

5869
.listview .listview-body .accordion {
@@ -71,9 +82,15 @@
7182
}
7283

7384
.listview .listview-body .accordion-body {
85+
display: flex;
86+
flex-wrap: wrap;
7487
padding: var(--bb-lv-body-padding);
7588
}
7689

90+
.listview .listview-body .accordion-item {
91+
width: 100%;
92+
}
93+
7794
.listview .listview-body .accordion-item:last-child .accordion-header {
7895
border-bottom: 1px solid var(--bb-lv-border-color);
7996
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -381,9 +381,9 @@ $bb-lv-border-color: var(--bs-border-color);
381381
$bb-lv-item-trans: border .3s linear;
382382
$bb-lv-item-border-hover-color: #409eff;
383383
$bb-lv-item-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
384-
$bb-lv-body-padding: 0.5rem;
385-
$bb-lv-body-item-gap: 0.5rem;
386-
$bb-lv-footer-padding: 0.5rem;
384+
$bb-lv-body-padding: 1rem 0 0 1rem;
385+
$bb-lv-body-item-margin: 0 1rem 1rem 0;
386+
$bb-lv-footer-padding: 1rem;
387387

388388
// Logout
389389
$bb-logout-avatar-width: 42px;

0 commit comments

Comments
 (0)