demo/Pages/List/BasicList/BasicList.razor
2024-06-21 16:48:24 +08:00

106 lines
4.4 KiB
Plaintext

@namespace antblazorpro.Pages.List
@page "/list/basic-list"
<div>
<PageContainer Title="Basic List">
<Breadcrumb>
<Breadcrumb>
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem>List</BreadcrumbItem>
<BreadcrumbItem>Basic List </BreadcrumbItem>
</Breadcrumb>
</Breadcrumb>
<ChildContent>
<div class="standardList">
<Card>
<Row Gutter="24">
<AntDesign.Col Sm="8" Xs="24">
@Info("My to do", "8 tasks", true)
</AntDesign.Col>
<AntDesign.Col Sm="8" Xs="24">
@Info("Average task processing time this week", "32 minutes", true)
</AntDesign.Col>
<AntDesign.Col Sm="8" Xs="24">
@Info("Number of tasks completed this week", "24 tasks")
</AntDesign.Col>
</Row>
</Card>
<Card Class="listCard"
Title="Basic list"
Style="margin-top: 24px;"
BodyStyle="padding: 0 32px 40px 32px">
<Extra>
<div class="extraContent">
<RadioGroup @bind-Value="_model.Status">
<Radio RadioButton Value="@("all")">All</Radio>
<Radio RadioButton Value="@("progress")">Processing</Radio>
<Radio RadioButton Value="@("waiting")">Waiting</Radio>
</RadioGroup>
<Search Class="extraContentSearch" Placeholder="Please Enter" @bind-Value="_model.SearchKeyword" />
</div>
</Extra>
<ChildContent>
<Button Type="dashed"
Style="width: 100%; margin-bottom: 8px;"
OnClick="ShowModal">
<Icon Type="plus" Theme="outline" />
Add
</Button>
<AntList TItem="ListItemDataType"
DataSource="_data"
ItemLayout="ListItemLayout.Horizontal">
<ListItem Actions="_actions">
<ListItemMeta Avatar="@context.Avatar" Description="@context.SubDescription">
<TitleTemplate>
<a href="@context.Href">@context.Title</a>
</TitleTemplate>
</ListItemMeta>
<div class="listContent">
<div class="listContentItem">
<span>Owner</span>
<p>@context.Owner</p>
</div>
<div class="listContentItem">
<span>Starting time</span>
<p>@context.CreatedAt.ToString("yyyy-MM-dd HH:mm")</p>
</div>
<div class="listContentItem">
<AntDesign.Progress Percent="@context.Percent"
Status="@_pStatus[context.Status]"
StrokeWidth="6"
Style="width: 180px;" />
</div>
</div>
</ListItem>
</AntList>
</ChildContent>
</Card>
</div>
</ChildContent>
</PageContainer>
</div>
@code
{
private static readonly RenderFragment Edit = @<a key="edit">
Edit
</a>;
private readonly RenderFragment[] _actions =
{
Edit
};
private RenderFragment Info(string title, string value, bool bordered = false) {
return @<div class="headerInfo">
<span>@title</span>
<p>@value</p>
@if (bordered) {
<em />
}
</div>;
}
}