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

Commit 761c87c

Browse files
teacher-zhouteacher-zhou
authored
fix: 重构 TTable 的代码实现 (#263)
2 parents 218808c + 8ce8b81 commit 761c87c

30 files changed

Lines changed: 1216 additions & 882 deletions

‎doc/TDesign.Docs.ServerSide/TDesign.xml‎

Lines changed: 136 additions & 103 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎doc/TDesign.Docs.Shared/Components/ComponentAPI.razor‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
@if (Parameters.Any())
66
{
77
<h3 style="font-weight: 700;font-size: 20px;line-height: 28px;margin: 48px 0 8px;display: flex;align-items: center;">@Title 的参数</h3>
8-
<TTable TItem="Parameter" Data="Parameters">
9-
<TTableFieldColumn Value="context?.Name" Header="名称" style="width:200px"></TTableFieldColumn>
10-
<TTableFieldColumn Header="类型">
8+
<TTable TItem="Parameter" Data="Parameters" >
9+
<TTableFieldColumn Field="f=>f.Name" Header="名称" style="width:200px"></TTableFieldColumn>
10+
<TTableFieldColumn Field="f=>f.Type" Header="类型">
1111
<code>@context?.Type</code>
1212
</TTableFieldColumn>
1313

14-
<TTableFieldColumn Value="context?.Description" Header="描述"></TTableFieldColumn>
15-
<TTableFieldColumn Value="context?.Default" Header="默认值" style="width:100px"></TTableFieldColumn>
16-
<TTableFieldColumn Header="必填" style="width:80px">
14+
<TTableFieldColumn Field="f=>f.Description" Header="描述"></TTableFieldColumn>
15+
<TTableFieldColumn Field="f=>f.Default" Header="默认值" style="width:100px"></TTableFieldColumn>
16+
<TTableFieldColumn Field="f=>f.Required" Header="必填" style="width:80px">
1717
@if (context.Required)
1818
{
1919
<TTag Theme="Theme.Danger">Y</TTag>
@@ -31,9 +31,9 @@
3131

3232
<h3 style="font-weight: 700;font-size: 20px;line-height: 28px;margin: 48px 0 8px;display: flex;align-items: center;">@Title 的方法</h3>
3333
<TTable TItem="Method" Data="Methods">
34-
<TTableFieldColumn Value="context?.Name" Header="名称" AdditionalStyle="width:200px"></TTableFieldColumn>
35-
<TTableFieldColumn Value="context?.Parameter" Header="参数" AdditionalStyle="width:200px"></TTableFieldColumn>
36-
<TTableFieldColumn Value="context?.Description" Header="描述"></TTableFieldColumn>
34+
<TTableFieldColumn Field="f=>f.Name" Header="名称" style="width:200px"></TTableFieldColumn>
35+
<TTableFieldColumn Field="f=>f.Parameter" Header="参数" style="width:200px"></TTableFieldColumn>
36+
<TTableFieldColumn Field="f=>f.Description" Header="描述"></TTableFieldColumn>
3737
</TTable>
3838
}
3939
</div>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
<TMenuItem Link="components/input">Input 输入框</TMenuItem>
3131
<TMenuItem Link="components/inputadornment">InputAdornment 输入装饰器</TMenuItem>
3232
<TMenuItem Link="components/inputnumber">InputNumber 数字输入框</TMenuItem>
33+
<TMenuItem Link="components/inputtag">TagInput 标签输入框</TMenuItem>
3334
<TMenuItem Link="components/radio">InputRadio 单选框</TMenuItem>
3435
<TMenuItem Link="components/inputrange">RangeInput 范围输入框</TMenuItem>
3536
<TMenuItem Link="components/select">Select 选择器</TMenuItem>

‎doc/TDesign.Docs.Shared/Pages/Components/Data/TablePage.razor‎

Lines changed: 167 additions & 143 deletions
Large diffs are not rendered by default.

‎doc/TDesign.Docs.Shared/Pages/Components/Input/InputTagPage.razor‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@page "/components/inputtag"
2+
3+
<LayoutContent AnchorItems="@(new[]{"基础标签输入框","限制标签的数量","不同尺寸的标签","不同的主题颜色","自适应宽度","API"})">
4+
<PageHeader Title="TagInput 标签输入框">
5+
用于输入文本标签。
6+
</PageHeader>
7+
<TAlert Theme="Theme.Warning">
8+
字段的类型必须是 <code>IEumerable&lt;string></code> 类型。
9+
</TAlert>
10+
<Example Title="基础标签输入框">
11+
<Description></Description>
12+
<RunContent>
13+
<TInputTag @bind-Value="BasicTags" />
14+
<TInputTag @bind-Value="BasicTags" Prefix="标签" />
15+
<TInputTag @bind-Value="BasicTags">
16+
<PrefixContent>
17+
<TIcon Name="IconName.CheckRectangle" /> 标签
18+
</PrefixContent>
19+
</TInputTag>
20+
@string.Join(",",BasicTags)
21+
</RunContent>
22+
<CodeContent>
23+
@Code.Create(@"
24+
```cshtml-razor
25+
<TInputTag @bind-Value=""BasicTags"" />
26+
<TInputTag @bind-Value=""BasicTags"" Prefix=""标签"" />
27+
<TInputTag @bind-Value=""BasicTags"">
28+
<PrefixContent>
29+
<TIcon Name=""IconName.CheckRectangle"" /> 标签
30+
<PrefixContent>
31+
</TInputTag>
32+
```
33+
```cs
34+
IEnumerable<string> BasicTags { get; set; } = Enumerable.Empty<string>();
35+
```
36+
")
37+
</CodeContent>
38+
</Example>
39+
<Example Title="限制标签的数量">
40+
<Description>
41+
使用 <code>Max</code> 限制数量。
42+
</Description>
43+
<RunContent>
44+
<TInputTag @bind-Value="LimitTags" Placeholder="最多输入5个" Max="5" />
45+
</RunContent>
46+
<CodeContent>
47+
@Code.Create(@"
48+
```cshtml-razor
49+
<TInputTag @bind-Value=""LimitTags"" Placeholder=""最多输入5个"" Max=""5"" />
50+
```
51+
```cs
52+
IEnumerable<string> LimitTags { get; set; } = Enumerable.Empty<string>();
53+
```
54+
")
55+
</CodeContent>
56+
</Example>
57+
<Example Title="不同尺寸的标签">
58+
<Description></Description>
59+
<RunContent>
60+
<TInputTag @bind-Value="BasicTags" Size="Size.Small" />
61+
<TInputTag @bind-Value="BasicTags" Size="Size.Medium" />
62+
<TInputTag @bind-Value="BasicTags" Size="Size.Large" />
63+
</RunContent>
64+
<CodeContent>
65+
@Code.Create(@"
66+
```cshtml-razor
67+
<TInputTag @bind-Value=""BasicTags"" Size=""Size.Small"" />
68+
<TInputTag @bind-Value=""BasicTags"" Size=""Size.Medium"" />
69+
<TInputTag @bind-Value=""BasicTags"" Size=""Size.Large"" />
70+
```
71+
")
72+
</CodeContent>
73+
</Example>
74+
<Example Title="不同的主题颜色">
75+
<Description>
76+
设置 <code>Theme</code> 设置不同主题。
77+
</Description>
78+
<RunContent>
79+
<TInputTag @bind-Value="Tags" Theme="Theme.Primary" />
80+
<TInputTag @bind-Value="Tags" Theme="Theme.Success" />
81+
<TInputTag @bind-Value="Tags" Theme="Theme.Warning" />
82+
<TInputTag @bind-Value="Tags" Theme="Theme.Danger" />
83+
</RunContent>
84+
<CodeContent>
85+
@Code.Create(@"
86+
```cshtml-razor
87+
<TInputTag @bind-Value=""Tags"" Theme=""Theme.Primary"" />
88+
<TInputTag @bind-Value=""Tags"" Theme=""Theme.Success"" />
89+
<TInputTag @bind-Value=""Tags"" Theme=""Theme.Warning"" />
90+
<TInputTag @bind-Value=""Tags"" Theme=""Theme.Danger"" />
91+
```
92+
")
93+
</CodeContent>
94+
</Example>
95+
<Example Title="自适应宽度">
96+
<Description></Description>
97+
<RunContent>
98+
<TInputTag AutoWidth @bind-Value="Tags" Theme="Theme.Primary" />
99+
</RunContent>
100+
<CodeContent>
101+
@Code.Create(@"
102+
```cshtml-razor
103+
<TInputTag AutoWidth @bind-Value=""Tags"" Theme=""Theme.Primary"" />
104+
```
105+
")
106+
</CodeContent>
107+
</Example>
108+
<div id="API"></div>
109+
<ComponentAPI Component="typeof(TInputTag)"/>
110+
</LayoutContent>
111+
@code{
112+
IEnumerable<string> BasicTags { get; set; } = Enumerable.Empty<string>();
113+
IEnumerable<string> LimitTags { get; set; } = Enumerable.Empty<string>();
114+
IEnumerable<string> Tags { get; set; } = new List<string> { "Blazor", "Vue", "Angular", "React" };
115+
IEnumerable<string> RepeatTag { get; set; } = Enumerable.Empty<string>();
116+
}

‎doc/TDesign.Docs.Shared/Pages/TestPage.razor‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,27 @@
22
@using Test=TDesign.Docs.Shared.Pages.Components.Data.TablePage
33
@layout EmptyLayout
44

5+
<TTable TItem="Test.User" Data="Test.User.GetData()">
6+
<TTableExpandColumn>
7+
<h4>Name:@context.Name</h4>
8+
</TTableExpandColumn>
9+
<TTableCheckboxColumn Field="f=>f.Id" />
10+
<TTableFieldColumn Field="f=>f.Id" />
11+
<TTableFieldColumn Field="f=>f.Name" />
12+
<TTableFieldColumn Field="f=>f.Age" >
13+
<FooterContent>
14+
底部内容
15+
</FooterContent>
16+
</TTableFieldColumn>
17+
<TTableFieldColumn Field="f=>f.Gender" />
18+
19+
</TTable>
520

6-
<TPopup Content="Hello" Placement="PopupPlacement.Right">
7-
<TButton>Submit</TButton>
8-
</TPopup>
21+
@code {
22+
IEnumerable<string> Text { get; set; } = Enumerable.Empty<string>();
23+
24+
void HandleKey(KeyboardEventArgs e)
25+
{
26+
27+
}
28+
}

‎doc/TDesign.Docs.Shared/wwwroot/app.css‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ code {
66
color: red;
77
display: inline-block;
88
background-color: #f8f8f8;
9-
padding-top: 2px;
10-
padding-bottom: 2px;
11-
padding-left: 10px;
12-
padding-right: 10px;
9+
/*padding-top: 2px;*/
10+
/*padding-bottom: 2px;*/
11+
padding-left: 5px;
12+
padding-right: 5px;
1313
}
1414
:root[theme-mode=dark] code {
1515
background-color: var(--td-gray-color-11);
@@ -123,6 +123,9 @@ code {
123123
border-top-right-radius: 5px;
124124
overflow: auto;
125125
}
126+
.demo-wrapper > .content.code{
127+
padding:30px;
128+
}
126129

127130
.demo-wrapper > .content.code-collapse {
128131
transition-duration: .8s;

0 commit comments

Comments
 (0)