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

【新增】进度条组件 #105

Merged
merged 32 commits into from
Oct 8, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
f704f78
Add:TProgress Component
wuxinheng Sep 21, 2022
842fa9b
优化:可以在线形内展示进度信息
wuxinheng Sep 21, 2022
0d3820d
优化:
wuxinheng Sep 22, 2022
3b53a9c
上传
wuxinheng Sep 22, 2022
b75aa10
优化部分代码
wuxinheng Sep 22, 2022
518d965
优化:
wuxinheng Sep 22, 2022
0413460
优化
wuxinheng Sep 22, 2022
06e0e6d
新增
wuxinheng Sep 22, 2022
55ac32c
更新:
wuxinheng Sep 22, 2022
5e0f175
新增:
wuxinheng Sep 23, 2022
a75c5f5
新增:
wuxinheng Sep 23, 2022
feb2064
合并master 冲突文件优先使用传入文件
wuxinheng Sep 23, 2022
1e22df6
修改进度条命名空间
wuxinheng Sep 23, 2022
07f70a8
优化:
wuxinheng Sep 23, 2022
e035f91
合并master分支,使用传入项
wuxinheng Sep 24, 2022
b95d609
拆分原有的进度条组件
wuxinheng Sep 25, 2022
69701d8
修改环形进度条逻辑和默认SIze
wuxinheng Sep 26, 2022
fbc6ec0
移动代码文件
wuxinheng Sep 26, 2022
4a74724
完善环形进度条百分比
wuxinheng Sep 26, 2022
9aea2fd
优化进度条代码
wuxinheng Sep 26, 2022
99818e2
删除多余的属性
wuxinheng Sep 26, 2022
e41dae4
删除拓展方法及其使用
wuxinheng Sep 26, 2022
c7acb90
更新文档进度条 Space使用,未完
wuxinheng Sep 26, 2022
9658e25
使用ComponentBuilder 优化代码
wuxinheng Sep 27, 2022
89b9ab0
Merge branch 'feature/component/progress' of https://github.com/Achie…
wuxinheng Sep 27, 2022
709b20b
优化进度条拆分过度组件
wuxinheng Sep 27, 2022
44a6a07
优化文档Space 使用
wuxinheng Sep 27, 2022
9946089
解决从master合并的冲突
teacher-zhou Oct 7, 2022
f278f09
【更新】进度条的实现方式
teacher-zhou Oct 8, 2022
e8459ea
修复 icon 显示不正确的问题
teacher-zhou Oct 8, 2022
4193882
修改迁入代码的自动化编译脚本
teacher-zhou Oct 8, 2022
fcb2e49
删除多余的类
teacher-zhou Oct 8, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: .NET
name: 编译 & 测试

on:
push:
Expand All @@ -13,11 +13,13 @@ jobs:

steps:
- uses: actions/checkout@v3
- name: Setup .NET
- name: 配置 .NET
uses: actions/setup-dotnet@v2
with:
dotnet-version: 6.0.x
- name: Restore dependencies
- name: 还原包
run: dotnet restore
- name: Build
- name: 编译
run: dotnet build --no-restore
- name: 测试
run: dotnet test
11 changes: 6 additions & 5 deletions doc/TDesignBlazor.Docs.Shared/Components/Example.razor
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<h2>@Title</h2>
@if (Description is not null)
{
<p>@Description</p>
<p>@Description</p>
}

@*<Tab Position="TDesignBlazor.Position.Top" >
Expand All @@ -18,11 +18,11 @@

<Div AdditionalCssClass="demo-wrapper">
<Div AdditionalCssClass="content" AdditionalStyle="@RunStyle">
@RunContent
@RunContent
</Div>
<Div class="footer">
<Div class="btn">
<Icon AdditionalCssClass="@BtnClass" Name="IconName.Code" Size="24px" @onclick="e=>ToogleCode()" style="display: flex;align-content: center;justify-content: center;align-items: center;flex-wrap: nowrap;"/>
<Icon AdditionalCssClass="@BtnClass" Name="IconName.Code" Size="24px" @onclick="e=>ToogleCode()" />
</Div>
</Div>
<Div class="@CodeClass" style="@GetStyle()">
Expand All @@ -37,11 +37,11 @@
[Parameter] public RenderFragment Description { get; set; }
[Parameter] public RenderFragment CodeContent { get; set; }
[Parameter] public RenderFragment RunContent { get; set; }
[Parameter]public string? RunStyle{ get; set; }
[Parameter] public string? RunStyle { get; set; }

bool Active = false;

string GetStyle() =>Active?"": "display:none";
string GetStyle() => Active ? "" : "display:none";
string CodeClass => HtmlHelper.CreateCssBuilder().Append("content code")
//.Append(Active, "code-collapse", "code-expand")
.ToString()
Expand All @@ -55,3 +55,4 @@
StateHasChanged();
}
}

4 changes: 2 additions & 2 deletions doc/TDesignBlazor.Docs.Shared/Layouts/MainLayout.razor
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<LogoContent>
<img alt="TDesignBlazor Logo" width="100" src="https://tdesign.gtimg.com/site/TDesign.png">
&nbsp;&nbsp;
<h3><i>基于 TDesignBlazor 的 Blazor 企业级组件库</i></h3>
<h2><i>基于 TDesign 的 Blazor 企业级组件库</i></h2>
</LogoContent>
<OperationContent>
<a href="https://tdesign.tencent.com/" title="官网" target="_blank" style="text-decoration:none">
Expand All @@ -20,7 +20,7 @@
</HeaderContent>
<LeftSideContent>
<div style="overflow-y:auto;height:95vh;overflow-x:hidden">
<NavMenu />
<NavMenu />
</div>
</LeftSideContent>
<ChildContent>
Expand Down
1 change: 1 addition & 0 deletions doc/TDesignBlazor.Docs.Shared/Layouts/NavMenu.razor
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
<MenuItem Link="components/loading">Loading 加载</MenuItem>
<MenuItem Link="components/table">Table 表格</MenuItem>
<MenuItem Link="components/tag">Tag 标签</MenuItem>
<MenuItem Link="components/progress">Progress 进度条</MenuItem>
<MenuItem Link="/components/image">Image 图片</MenuItem>

</MenuItemGroup>
Expand Down
154 changes: 154 additions & 0 deletions doc/TDesignBlazor.Docs.Shared/Pages/Components/ProgressPage.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
@page "/components/progress"

<PageHeader Title="Progress 进度条">展示操作的当前进度。</PageHeader>


<Example Title="线形进度条">
<Description>以线形表示进度的组件,可以选择性地配有文字或图标补充显示进度和状态。多用于信息量较为丰富的情况。</Description>
<RunContent>
<h3>默认在线形外展示进度和状态</h3>
<Space Vertical AdditionalStyle="width:100%" Gap="20px">
<SpaceItem>
<span>默认样式</span>
<Progress Value="50" />
</SpaceItem>
<SpaceItem>
<span>100%</span>
<Progress Value="100" Status="Status.Success" ShowLabel/>
</SpaceItem>
<SpaceItem>
<span>进度完成</span>
<Progress Value="100" Status="Status.Success" />
</SpaceItem>
<SpaceItem>
<span>进度状态发生重大错误</span>
<Progress Value="50" Status="Status.Error" />
</SpaceItem>
<SpaceItem>
<span>进度被中断</span>
<Progress Value="50" Status="Status.Warning" />
</SpaceItem>
</Space>
<h3>可以在线形内展示进度信息</h3>
<Space Vertical AdditionalStyle="width:100%" Gap="20px">
<SpaceItem>
<span>默认样式</span>
<Progress Value="38" Theme="ProgressTheme.Plump" ShowLabel/>
</SpaceItem>
<SpaceItem>
<span>进度0-10%时数字位置出现在目前进度的右边区域</span>
<Progress Value="4" Theme="ProgressTheme.Plump" ShowLabel />
</SpaceItem>
</Space>
</RunContent>
<CodeContent>
@Code.Create(@"
teacher-zhou marked this conversation as resolved.
Show resolved Hide resolved
```html
<h3>默认在线形外展示进度和状态</h3>
<span>默认样式</span>
<Progress Value=""50"" />

<span>100%</span>
<Progress Value=""100"" Status=""Status.Success"" ShowLabel/>

<span>进度完成</span>
<Progress Value=""100"" Status=""Status.Success"" />

<span>进度状态发生重大错误</span>
<Progress Value=""50"" Status=""Status.Error"" />

<span>进度被中断</span>
<Progress Value=""50"" Status=""Status.Warning"" />


<h3>可以在线形内展示进度信息</h3>
<span>默认样式</span>
<Progress Value=""38"" Theme=""ProgressTheme.Plump"" />

<span>进度0-10%时数字位置出现在目前进度的右边区域</span>
<Progress Value=""4"" Theme=""ProgressTheme.Plump"" />
```
")
</CodeContent>
</Example>
<Example Title="环形进度条">
<Description>以线形表示进度的组件,环内可选择性地配有文字或图标补充显示进度和状态。多用于需要强调进度百分比的情况。</Description>
<RunContent>
<Space AdditionalStyle="text-align:center" Gap="72px">
<SpaceItem>
<Span>默认样式</Span>
<Progress Value="30" Theme="ProgressTheme.Circle" ShowLabel/>
</SpaceItem>
<SpaceItem>
<Span>不显示数字</Span>
<Progress Value="100" Theme="ProgressTheme.Circle" Status="Status.Success" HideLabel/>
</SpaceItem>
<SpaceItem>
<Span>自定义内容</Span>
<Progress Value="50" Label="75天" Theme="ProgressTheme.Circle" Status="Status.Success" ShowLabel />
</SpaceItem>
</Space>
<br /><br />
<Space AdditionalStyle="text-align:center" Gap="72px">
<SpaceItem>
<Span>进度完成</Span>
<Progress Value="30" Theme="ProgressTheme.Circle" Status="Status.Success" />
</SpaceItem>
<SpaceItem>
<Span>进度状态发生错误</Span>
<Progress Value="75" Theme="ProgressTheme.Circle" Status="Status.Error" />
</SpaceItem>
<SpaceItem>
<Span>进度被中断</Span>
<Progress Value="50" Theme="ProgressTheme.Circle" Status="Status.Warning" />
</SpaceItem>
</Space><br /><br />
<Space AdditionalStyle="text-align:center" Gap="72px">
<SpaceItem>
<Span>小尺寸</Span>
<Progress Value="30" Theme="ProgressTheme.Circle" ShowLabel Size="Size.Small"/>
</SpaceItem>
<SpaceItem>
<Span>默认尺寸</Span>
<Progress Value="30" Theme="ProgressTheme.Circle" ShowLabel Size="Size.Medium" />
</SpaceItem>
<SpaceItem>
<Span>大尺寸</Span>
<Progress Value="30" Theme="ProgressTheme.Circle" ShowLabel Size="Size.Large"/>
</SpaceItem>
</Space>
</RunContent>
<CodeContent>
@Code.Create(@"
```html
<Span>默认样式</Span>
<Progress Value=""30"" Theme=""ProgressTheme.Circle"" ShowLabel/>

<Span>不显示数字</Span>
<Progress Value=""100"" Theme=""ProgressTheme.Circle"" Status=""Status.Success"" HideLabel/>

<Span>自定义内容</Span>
<Progress Value=""50"" Label=""75天"" Theme=""ProgressTheme.Circle"" Status=""Status.Success"" ShowLabel />

<Span>进度完成</Span>
<Progress Value=""30"" Theme=""ProgressTheme.Circle"" Status=""Status.Success"" />

<Span>进度状态发生错误</Span>
<Progress Value=""75"" Theme=""ProgressTheme.Circle"" Status=""Status.Error"" />

<Span>进度被中断</Span>
<Progress Value=""50"" Theme=""ProgressTheme.Circle"" Status=""Status.Warning"" />

<Span>小尺寸</Span>
<Progress Value=""30"" Theme=""ProgressTheme.Circle"" ShowLabel Size=""Size.Small""/>

<Span>默认尺寸</Span>
<Progress Value=""30"" Theme=""ProgressTheme.Circle"" ShowLabel Size=""Size.Medium"" />

<Span>大尺寸</Span>
<Progress Value=""30"" Theme=""ProgressTheme.Circle"" ShowLabel Size=""Size.Large""/>

```
")
</CodeContent>
</Example>
98 changes: 98 additions & 0 deletions src/TDesignBlazor.Test/Components/ProgressTest.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
using ComponentBuilder;

namespace TDesignBlazor.Test.Components;
public class ProgressTest : TestBase<Progress>
{
[Fact(DisplayName = "进度条 - 渲染 50% 进度的进度条和样式")]
public void Test_Progress_Default()
{
GetComponent(m => m.Add(p => p.Value, 50)).MarkupMatches(@"
<div class=""t-progress"">
<div class=""t-progress--thin t-progress--status--undefined"">
<div class=""t-progress__bar"">
<div class=""t-progress__inner"" style=""width:50%""></div>
</div>
<div class=""t-progress__info""></div>
</div>
</div>
");
}

[Fact(DisplayName = "进度条 - ShowLabel 参数")]
public void Test_Progress_ShowLabel_Parameter()
{
GetComponent(m => m.Add(p => p.Value, 50).Add(p => p.ShowLabel, true)).MarkupMatches(@"
<div class=""t-progress"">
<div class=""t-progress--thin t-progress--status--undefined"">
<div class=""t-progress__bar"">
<div class=""t-progress__inner"" style=""width:50%""></div>
</div>
<div class=""t-progress__info"">50%</div>
</div>
</div>
");
}

[Fact(DisplayName = "进度条 - Plump 类型时,Value < 10 的样式")]
public void Test_Progress_Plump_UnderTen_Label()
{
GetComponent(m => m.Add(p => p.Value, 5).Add(p => p.ShowLabel, true).Add(p => p.Theme, ProgressTheme.Plump)).MarkupMatches(@"
<div class=""t-progress"">
<div class=""t-progress__bar t-progress--plump t-progress--status--undefined t-progress--under-ten"">
<div class=""t-progress__inner"" style=""width:5%""></div>
<div class=""t-progress__info"">5%</div>
</div>
</div>
");
}

[Fact(DisplayName = "进度条 - Plump 类型时,Value >= 10 的样式")]
public void Test_Progress_Plump_OverTen_Label()
{
GetComponent(m => m.Add(p => p.Value, 15).Add(p => p.ShowLabel, true).Add(p => p.Theme, ProgressTheme.Plump)).MarkupMatches(@"
<div class=""t-progress"">
<div class=""t-progress__bar t-progress--plump t-progress--status--undefined t-progress--over-ten"">
<div class=""t-progress__inner"" style=""width:15%"">
<div class=""t-progress__info"">15%</div>
</div>
</div>
</div>
");
}

[Theory(DisplayName ="进度条 - Status 参数")]
[InlineData(new object[] { Status.Warning })]
[InlineData(new object[] { Status.Success })]
[InlineData(new object[] { Status.Error })]
[InlineData(new object[] { Status.Default })]
public void Test_Progress_Status_Parameter(Status status)
{
GetComponent(m => m.Add(p => p.Value, 15).Add(p => p.ShowLabel, true).Add(p => p.Status, status)).MarkupMatches($@"
<div class=""t-progress"">
<div class=""t-progress--thin t-progress--status--{status.ToString().ToLower()}"">
<div class=""t-progress__bar"">
<div class=""t-progress__inner"" style=""width:15%""></div>
</div>
<div class=""t-progress__info"">15%</div>
</div>
</div>
");
}

[Fact(DisplayName ="进度条 - Circle 类型")]
public void Test_Progress_Circle()
{
GetComponent(m => m.Add(p => p.Value, 30).Add(p => p.ShowLabel, true).Add(p => p.Theme, ProgressTheme.Circle).Add(p=>p.Size,Size.Small))
.MarkupMatches($@"
<div class=""t-progress"">
<div class=""t-progress--circle t-progress--status--undefined"" style=""width:72px;height:72px;font-size:14px;"">
<div class=""t-progress__info"">30%</div>
<svg width=""72"" height=""72"" viewBox=""0 0 72 72"">
<circle cx=""36"" cy=""36"" r=""34"" stroke-width=""4"" fill=""none"" class=""t-progress__circle-outer""></circle>
<circle cx=""36"" cy=""36"" r=""34"" stroke-width=""4"" fill=""none"" stroke-linecap=""round"" transform=""matrix(0,-1,1,0,0,72)"" stroke-dasharray=""64.08849013323179 214.62830044410595"" class=""t-progress__circle-inner""></circle>
</svg>
</div>
</div>
");
}
}
Loading