Skip to content

Commit

Permalink
feat(ListView): add Height parameter (#5132)
Browse files Browse the repository at this point in the history 
* refactor: 精简代码

* doc: 移除 lv-demo 样式

* refactor: 更改私有属性为私有字段

* feat: 增加 Height 参数

* style: 更新样式

* doc: 更新示例

* test: 更新单元测试
  • Loading branch information
@ArgoZhang
ArgoZhang authored Jan 16, 2025
1 parent 3b2af83 commit cf6aaab
Show file tree
Hide file tree
Showing 6 changed files with 134 additions and 115 deletions.
186 changes: 92 additions & 94 deletions src/BootstrapBlazor.Server/Components/Samples/ListViews.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,105 +6,103 @@

<h4>@Localizer["ListViewsSubTitle"]</h4>

<div class="lv-demo">
<DemoBlock Title="@Localizer["BasicUsageTitle"]"
Introduction="@Localizer["BasicUsageIntro"]"
Name="Normal">
<p>@((MarkupString)Localizer["BasicUsageP1"].Value)</p>
<ListView TItem="Product" Items="@Products" OnListViewItemClick="OnListViewItemClick">
<HeaderTemplate>
<div>@Localizer["ProductListText"]</div>
</HeaderTemplate>
<BodyTemplate>
<Card>
<BodyTemplate>
<img src="@context.ImageUrl" />
<div class="lv-demo-desc">@context.Description</div>
</BodyTemplate>
</Card>
</BodyTemplate>
<FooterTemplate>
<div class="text-end">
Copyright Bootstrap Blazor
</div>
</FooterTemplate>
</ListView>
<DemoBlock Title="@Localizer["BasicUsageTitle"]"
Introduction="@Localizer["BasicUsageIntro"]"
Name="Normal">
<section ignore>@((MarkupString)Localizer["BasicUsageP1"].Value)</section>
<ListView TItem="Product" Items="@Products" OnListViewItemClick="OnListViewItemClick" Height="620px">
<HeaderTemplate>
<div>@Localizer["ProductListText"]</div>
</HeaderTemplate>
<BodyTemplate>
<Card>
<BodyTemplate>
<img src="@context.ImageUrl" />
<div class="lv-demo-desc">@context.Description</div>
</BodyTemplate>
</Card>
</BodyTemplate>
<FooterTemplate>
<div class="text-end">
Copyright Bootstrap Blazor
</div>
</FooterTemplate>
</ListView>

<ConsoleLogger @ref="Logger" />
</DemoBlock>
<ConsoleLogger @ref="Logger" />
</DemoBlock>

<DemoBlock Title="@Localizer["PaginationTitle"]"
Introduction="@Localizer["PaginationIntro"]"
Name="Pagination">
<ListView TItem="Product" Pageable="true" PageItems="4" OnQueryAsync="@OnQueryAsync">
<HeaderTemplate>
<div>@Localizer["ProductListText"]</div>
</HeaderTemplate>
<BodyTemplate>
<Card>
<BodyTemplate>
<img src="@context.ImageUrl" />
<div class="lv-demo-desc">@context.Description</div>
</BodyTemplate>
</Card>
</BodyTemplate>
</ListView>
</DemoBlock>
<DemoBlock Title="@Localizer["PaginationTitle"]"
Introduction="@Localizer["PaginationIntro"]"
Name="Pagination">
<ListView TItem="Product" Pageable="true" PageItems="4" OnQueryAsync="@OnQueryAsync" Height="620px">
<HeaderTemplate>
<div>@Localizer["ProductListText"]</div>
</HeaderTemplate>
<BodyTemplate>
<Card>
<BodyTemplate>
<img src="@context.ImageUrl" />
<div class="lv-demo-desc">@context.Description</div>
</BodyTemplate>
</Card>
</BodyTemplate>
</ListView>
</DemoBlock>

<DemoBlock Title="@Localizer["GroupTitle"]"
Introduction="@Localizer["GroupIntro"]"
Name="Group">
<ListView TItem="Product" GroupName="p => p.Category" GroupOrderCallback="GroupOrderCallback" GroupItemOrderCallback="GroupItemOrderCallback" OnQueryAsync="@OnQueryAsync">
<HeaderTemplate>
<div>@Localizer["ProductListText"]</div>
</HeaderTemplate>
<BodyTemplate>
<Card>
<BodyTemplate>
<img src="@context.ImageUrl" />
<div class="lv-demo-desc">@context.Description</div>
</BodyTemplate>
</Card>
</BodyTemplate>
</ListView>
</DemoBlock>
<DemoBlock Title="@Localizer["GroupTitle"]"
Introduction="@Localizer["GroupIntro"]"
Name="Group">
<ListView TItem="Product" GroupName="p => p.Category" GroupOrderCallback="GroupOrderCallback" GroupItemOrderCallback="GroupItemOrderCallback" OnQueryAsync="@OnQueryAsync" Height="620px">
<HeaderTemplate>
<div>@Localizer["ProductListText"]</div>
</HeaderTemplate>
<BodyTemplate>
<Card>
<BodyTemplate>
<img src="@context.ImageUrl" />
<div class="lv-demo-desc">@context.Description</div>
</BodyTemplate>
</Card>
</BodyTemplate>
</ListView>
</DemoBlock>

<DemoBlock Title="@Localizer["CollapseTitle"]"
Introduction="@Localizer["CollapseIntro"]"
Name="Collapse">
<ListView TItem="Product" GroupName="p => p.Category" OnQueryAsync="@OnQueryAsync" Collapsible="true" CollapsedGroupCallback="CollapsedGroupCallback">
<HeaderTemplate>
<div>@Localizer["ProductListText"]</div>
</HeaderTemplate>
<BodyTemplate>
<Card>
<BodyTemplate>
<img src="@context.ImageUrl" />
<div class="lv-demo-desc">@context.Description</div>
</BodyTemplate>
</Card>
</BodyTemplate>
</ListView>
</DemoBlock>
<DemoBlock Title="@Localizer["CollapseTitle"]"
Introduction="@Localizer["CollapseIntro"]"
Name="Collapse">
<ListView TItem="Product" GroupName="p => p.Category" OnQueryAsync="@OnQueryAsync" Collapsible="true" CollapsedGroupCallback="CollapsedGroupCallback" Height="620px">
<HeaderTemplate>
<div>@Localizer["ProductListText"]</div>
</HeaderTemplate>
<BodyTemplate>
<Card>
<BodyTemplate>
<img src="@context.ImageUrl" />
<div class="lv-demo-desc">@context.Description</div>
</BodyTemplate>
</Card>
</BodyTemplate>
</ListView>
</DemoBlock>

<DemoBlock Title="@Localizer["IsAccordionTitle"]"
Introduction="@Localizer["IsAccordionIntro"]"
Name="IsAccordion">
<ListView TItem="Product" GroupName="p => p.Category" OnQueryAsync="@OnQueryAsync" Collapsible="true" IsAccordion="true">
<HeaderTemplate>
<div>@Localizer["ProductListText"]</div>
</HeaderTemplate>
<BodyTemplate>
<Card>
<BodyTemplate>
<img src="@context.ImageUrl" />
<div class="lv-demo-desc">@context.Description</div>
</BodyTemplate>
</Card>
</BodyTemplate>
</ListView>
</DemoBlock>
</div>
<DemoBlock Title="@Localizer["IsAccordionTitle"]"
Introduction="@Localizer["IsAccordionIntro"]"
Name="IsAccordion">
<ListView TItem="Product" GroupName="p => p.Category" OnQueryAsync="@OnQueryAsync" Collapsible="true" IsAccordion="true" Height="620px">
<HeaderTemplate>
<div>@Localizer["ProductListText"]</div>
</HeaderTemplate>
<BodyTemplate>
<Card>
<BodyTemplate>
<img src="@context.ImageUrl" />
<div class="lv-demo-desc">@context.Description</div>
</BodyTemplate>
</Card>
</BodyTemplate>
</ListView>
</DemoBlock>

<AttributeTable Items="GetAttributes()"></AttributeTable>

Expand Down
16 changes: 6 additions & 10 deletions src/BootstrapBlazor.Server/Components/Samples/ListViews.razor.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
.lv-demo ::deep .listview {
height: 626px;
img {
margin-bottom: 1rem;
border-radius: var(--bs-border-radius);
}

.lv-demo ::deep .listview img {
margin-bottom: 1rem;
border-radius: var(--bs-border-radius);
}

.lv-demo ::deep .listview .listview-demo-desc {
text-align: center;
}
.lv-demo-desc {
text-align: center;
}
4 changes: 2 additions & 2 deletions src/BootstrapBlazor/Components/ListView/ListView.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@typeparam TItem
@inherits BootstrapComponentBase

<div @attributes="@AdditionalAttributes" class="@ClassString">
<div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString">
@if (HeaderTemplate != null)
{
<div class="listview-header">
Expand Down Expand Up @@ -57,7 +57,7 @@
}
else if (Pageable)
{
<Pagination PageCount="@PageCount" PageIndex="@PageIndex" OnPageLinkClick="@OnPageLinkClick"></Pagination>
<Pagination PageCount="@PageCount" PageIndex="@_pageIndex" OnPageLinkClick="@OnPageLinkClick"></Pagination>
}
</div>
}
Expand Down
27 changes: 18 additions & 9 deletions src/BootstrapBlazor/Components/ListView/ListView.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,7 @@ public partial class ListView<TItem> : BootstrapComponentBase
/// 获得/设置 BodyTemplate
/// </summary>
[Parameter]
#if NET6_0_OR_GREATER
[EditorRequired]
#endif
public RenderFragment<TItem>? BodyTemplate { get; set; }

/// <summary>
Expand Down Expand Up @@ -124,20 +122,31 @@ public partial class ListView<TItem> : BootstrapComponentBase
[Parameter]
public int PageItems { get; set; } = 20;

/// <summary>
/// 获得/设置 组件高度 默认 null 未设置高度 如：50% 100px 10rem 10vh 等
/// </summary>
[Parameter]
public string? Height { get; set; }

/// <summary>
/// 获得/设置 当前页码
/// </summary>
private int PageIndex { get; set; }
private int _pageIndex;

/// <summary>
/// 获得/设置 数据总条目
/// </summary>
protected int TotalCount { get; set; }
private int _totalCount;

/// <summary>
/// 数据集合内部使用
/// </summary>
protected IEnumerable<TItem> Rows => Items ?? [];
private List<TItem> Rows => Items?.ToList() ?? [];

private string? StyleString => CssBuilder.Default()
.AddClass($"height: {Height};", !string.IsNullOrEmpty(Height))
.AddStyleFromAttributes(AdditionalAttributes)
.Build();

/// <summary>
/// <inheritdoc/>
Expand All @@ -164,7 +173,7 @@ protected override async Task OnParametersSetAsync()
/// <returns></returns>
public async Task QueryAsync(int pageIndex = 1)
{
PageIndex = pageIndex;
_pageIndex = pageIndex;
await QueryData();
StateHasChanged();
}
Expand All @@ -179,18 +188,18 @@ protected async Task QueryData()
{
queryData = await OnQueryAsync(new QueryPageOptions()
{
PageIndex = PageIndex,
PageIndex = _pageIndex,
PageItems = PageItems,
});
}
if (queryData != null)
{
Items = queryData.Items;
TotalCount = queryData.TotalCount;
_totalCount = queryData.TotalCount;
}
}

private int PageCount => (int)Math.Ceiling(TotalCount * 1.0 / PageItems);
private int PageCount => (int)Math.Ceiling(_totalCount * 1.0 / PageItems);

/// <summary>
/// 点击元素事件
Expand Down
6 changes: 6 additions & 0 deletions src/BootstrapBlazor/Components/ListView/ListView.razor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@
flex-flow: row wrap;
flex: 1;
align-content: flex-start;
height: 1%;
min-height: 0;
}

.listview .listview-body.is-group {
Expand Down Expand Up @@ -85,6 +87,10 @@
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);
}
Expand Down
10 changes: 10 additions & 0 deletions test/UnitTest/Components/ListViewTest.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,16 @@ public void Items_Ok()
cut.Markup.Contains("listview-body");
}

[Fact]
public void Height_Ok()
{
var cut = Context.RenderComponent<ListView<Product>>(pb =>
{
pb.Add(a => a.Height, "50vh");
});
cut.Markup.Contains("style=\"height: 50vh;\"");
}

[Fact]
public async Task ListView_Ok()
{
Expand Down

0 comments on commit cf6aaab

Please sign in to comment.