Skip to content
This repository was archived by the owner on Jan 5, 2024. It is now read-only.

Commit b4e44f5

Browse files
teacher-zhouteacher-zhou
authored
【新增】分组组件 (#159)
2 parents 49e6378 + b1d9371 commit b4e44f5

3 files changed

Lines changed: 617 additions & 0 deletions

File tree

‎doc/TDesign.Docs.Shared/Layouts/NavMenu.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<TMenuItemGroup Title="导航">
1919
<TMenuItem Link="components/breadcrumb">Breadcrum 面包屑</TMenuItem>
2020
<TMenuItem Link="components/menu">Menu 导航菜单</TMenuItem>
21+
<TMenuItem Link="components/pagination">Pagination 分页</TMenuItem>
2122
<TMenuItem Link="components/step">Steps 步骤条</TMenuItem>
2223
<TMenuItem Link="components/tab">Tabs 选项卡</TMenuItem>
2324
</TMenuItemGroup>

‎doc/TDesign.Docs.Shared/Pages/Components/PaginationPage.razor‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
@page "/components/pagination"
2+
3+
<PageHeader Title="分页 Pagination">
4+
用于模块内切换内容的控件。
5+
</PageHeader>
6+
<HighlightAlert/>
7+
<h1>基础分页</h1>
8+
<Example Title="少量页面">
9+
<Description>最基础的分页控件，仅展示页码。建议使用在内容少于10页的轻量化分页场景。</Description>
10+
<RunContent>
11+
<TPagination @bind-Current="Page" @bind-PageSize="PageSize" @bind-Total="Total"/>
12+
<br />
13+
<TPagination @bind-Current="Page" @bind-PageSize="PageSize" @bind-Total="Total" ShowFirstLastBtn/>
14+
</RunContent>
15+
<CodeContent>
16+
@Code.Create(@"
17+
```html
18+
<TPagination bind-Current=""Page"" bind-PageSize=""PageSize"" bind-Total=""Total""/>
19+
<TPagination bind-Current=""Page"" bind-PageSize=""PageSize"" bind-Total=""Total"" ShowFirstLastBtn/>
20+
```
21+
```cs
22+
@code{
23+
long Page { get; set; } = 1;
24+
int PageSize { get; set; } = 10;
25+
long Total { get; set; } = 100;
26+
}
27+
```
28+
")
29+
</CodeContent>
30+
</Example>
31+
32+
@code{
33+
long Page { get; set; } = 1;
34+
int PageSize { get; set; } = 10;
35+
long Total { get; set; } = 100;
36+
}
37+
38+
<Example Title="页数较多">
39+
<Description>拥有大量数据需要展示，通过分页能够让用户快速定位当前页码。建议使用在内容超过10页以上的分页场景。</Description>
40+
<RunContent>
41+
<TPagination @bind-Current="Page1" @bind-PageSize="PageSize1" @bind-Total="Total1"/>
42+
<br />
43+
<TPagination @bind-Current="Page1" @bind-PageSize="PageSize1" @bind-Total="Total1" EllipsisMode="PageEllipsisMode.BothEnds"/>
44+
</RunContent>
45+
<CodeContent>
46+
@Code.Create(@"
47+
```html
48+
<TPagination bind-Current=""Page1"" bind-PageSize=""PageSize1"" bind-Total=""Total1""/>
49+
<TPagination bind-Current=""Page1"" bind-PageSize=""PageSize1"" bind-Total=""Total1"" EllipsisMode=""PageEllipsisMode.BothEnds""/>
50+
```
51+
```cs
52+
@code{
53+
long Page1 { get; set; } = 5;
54+
int PageSize1 { get; set; } = 20;
55+
long Total1 { get; set; } = 1000;
56+
}
57+
```
58+
")
59+
</CodeContent>
60+
</Example>
61+
62+
@code{
63+
long Page1 { get; set; } = 5;
64+
int PageSize1 { get; set; } = 20;
65+
long Total1 { get; set; } = 1000;
66+
}
67+
68+
<Example Title="带数据总量显示的分页">
69+
<Description>关联模块内数据进行展示，以方便用户无需全部浏览即可快速了解数据量级。常用于表格内的数据统计。</Description>
70+
<RunContent>
71+
<TPagination @bind-Current="Page2" @bind-PageSize="PageSize2" @bind-Total="Total2">
72+
<TotalContent>
73+
目前展现了 @context 条数据
74+
</TotalContent>
75+
</TPagination>
76+
</RunContent>
77+
<CodeContent>
78+
@Code.Create(@"
79+
```html
80+
<TPagination bind-Current=""Page2"" bind-PageSize=""PageSize2"" bind-Total=""Total2"">
81+
<TotalContent>
82+
目前展现了 @context 条数据
83+
</TotalContent>
84+
</TPagination>
85+
```
86+
")
87+
</CodeContent>
88+
</Example>
89+
@code {
90+
long Page2 { get; set; } = 5;
91+
int PageSize2 { get; set; } = 20;
92+
long Total2 { get; set; } = 1000;
93+
}
94+
95+
<Example Title="带快速跳转的分页">
96+
<Description>当数据有快速定位的需求时，通过选择显示快速跳转的分页。</Description>
97+
<RunContent>
98+
<TPagination @bind-Current="Page" @bind-PageSize="PageSize" @bind-Total="Total" ShowJumpPage/>
99+
</RunContent>
100+
<CodeContent>
101+
@Code.Create(@"
102+
```html
103+
<TPagination bind-Current=""Page"" bind-PageSize=""PageSize"" bind-Total=""Total"" ShowJumpPage/>
104+
```
105+
")
106+
</CodeContent>
107+
</Example>
108+
<Example Title="极简版分页">
109+
<Description>极度简单的翻页控件，只展示当前页、总页数及上下翻页。模块内的横向空间较少，并且无需精准定位具体页面的场景。</Description>
110+
<RunContent>
111+
<TPagination @bind-Current="Page" @bind-PageSize="PageSize" @bind-Total="Total" ShowJumpPage Simple/>
112+
</RunContent>
113+
<CodeContent>
114+
@Code.Create(@"
115+
```html
116+
<TPagination bind-Current=""Page"" bind-PageSize=""PageSize"" bind-Total=""Total"" ShowJumpPage Simple/>
117+
```
118+
")
119+
</CodeContent>
120+
</Example>
121+
<Example Title="迷你版分页">
122+
<Description>去掉线框的翻页控件，并保留翻页的主要功能。模块内的空间较少，需要轻量化的翻页的场景，以增加页面利用率。</Description>
123+
<RunContent>
124+
<TPagination @bind-Current="Page" @bind-PageSize="PageSize" @bind-Total="Total" Size="Size.Small" ShowJumpPage/>
125+
</RunContent>
126+
<CodeContent>
127+
@Code.Create(@"
128+
```html
129+
<TPagination bind-Current=""Page"" bind-PageSize=""PageSize"" bind-Total=""Total"" Size=""Size.Small"" ShowJumpPage/>
130+
```
131+
")
132+
</CodeContent>
133+
</Example>
134+
<Example Title="极简迷你版分页">
135+
<Description>更小尺寸的迷你风格分页控件，适合内嵌在其他组件中分页导航使用。</Description>
136+
<RunContent>
137+
<TPagination @bind-Current="Page" @bind-PageSize="PageSize" @bind-Total="Total" Size="Size.Small" ShowJumpPage Simple/>
138+
</RunContent>
139+
<CodeContent>
140+
@Code.Create(@"
141+
```html
142+
<TPagination bind-Current=""Page"" bind-PageSize=""PageSize"" bind-Total=""Total"" Size=""Size.Small"" ShowJumpPage Simple/>
143+
```
144+
")
145+
</CodeContent>
146+
</Example>

0 commit comments

Comments
 (0)