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

Commit

Permalink
[新增] Timeline 组件 (#172)
Browse files Browse the repository at this point in the history
  • Loading branch information
@teacher-zhou
teacher-zhou authored Nov 27, 2022
2 parents 4fa9efd + f921b33 commit 3912901
Show file tree
Hide file tree
Showing 12 changed files with 5,914 additions and 3,916 deletions.
1 change: 1 addition & 0 deletions doc/TDesign.Docs.Shared/Layouts/NavMenu.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
<TMenuItem Link="components/loading">Loading 加载</TMenuItem>
<TMenuItem Link="components/table">Table 表格</TMenuItem>
<TMenuItem Link="components/tag">Tag 标签</TMenuItem>
<TMenuItem Link="components/timeline">Timeline 时间轴</TMenuItem>
<TMenuItem Link="components/progress">Progress 进度条</TMenuItem>
<TMenuItem Link="components/skeleton">Skeleton 骨架屏</TMenuItem>

Expand Down
145 changes: 145 additions & 0 deletions doc/TDesign.Docs.Shared/Pages/Components/TimelinePage.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
@page "/components/timeline"

<PageHeader Title="Timeline 时间轴">
用于时间轴展示
</PageHeader>

<Example Title="基础时间轴">
<Description>
使用 <code>TimelineItem</code> 作为子项。
</Description>
<RunContent>
<TTimeline>
<TTimelineItem Label="2022-10-1">事件1</TTimelineItem>
<TTimelineItem Label="2022-10-11">事件2</TTimelineItem>
<TTimelineItem Label="2022-10-21">事件3</TTimelineItem>
</TTimeline>
<br />
<TTimeline Horizontal>
<TTimelineItem Label="2022-10-1">事件1</TTimelineItem>
<TTimelineItem Label="2022-10-11">事件2</TTimelineItem>
<TTimelineItem Label="2022-10-21">事件3</TTimelineItem>
</TTimeline>
</RunContent>
<CodeContent>
@Code.Create(@"
```html
<TTimeline>
<TTimelineItem Label=""2022-10-1"">事件1</TTimelineItem>
<TTimelineItem Label=""2022-10-11"">事件2</TTimelineItem>
<TTimelineItem Label=""2022-10-21"">事件3</TTimelineItem>
</TTimeline>

<TTimeline Horizontal>
<TTimelineItem Label=""2022-10-1"">事件1</TTimelineItem>
<TTimelineItem Label=""2022-10-11"">事件2</TTimelineItem>
<TTimelineItem Label=""2022-10-21"">事件3</TTimelineItem>
</TTimeline>
```
")
</CodeContent>
</Example>
<Example Title="点状时间轴">
<Description></Description>
<RunContent>
<TTimeline Theme="TimelineTheme.Dot">
<TTimelineItem Label="2022-10-1">事件1</TTimelineItem>
<TTimelineItem Label="2022-10-11">事件2</TTimelineItem>
<TTimelineItem Label="2022-10-21">事件3</TTimelineItem>
</TTimeline>
<br />
<TTimeline Horizontal Theme="TimelineTheme.Dot">
<TTimelineItem Label="2022-10-1">事件1</TTimelineItem>
<TTimelineItem Label="2022-10-11">事件2</TTimelineItem>
<TTimelineItem Label="2022-10-21">事件3</TTimelineItem>
</TTimeline>
</RunContent>
<CodeContent>
@Code.Create(@"
```html
<TTimeline Theme=""TimelineTheme.Dot"">
<TTimelineItem Label=""2022-10-1"">事件1</TTimelineItem>
<TTimelineItem Label=""2022-10-11"">事件2</TTimelineItem>
<TTimelineItem Label=""2022-10-21"">事件3</TTimelineItem>
</TTimeline>

<TTimeline Horizontal Theme=""TimelineTheme.Dot"">
<TTimelineItem Label=""2022-10-1"">事件1</TTimelineItem>
<TTimelineItem Label=""2022-10-11"">事件2</TTimelineItem>
<TTimelineItem Label=""2022-10-21"">事件3</TTimelineItem>
</TTimeline>
```
")
</CodeContent>
</Example>
<Example Title="自定义节点图标">
<Description></Description>
<RunContent>
<TTimeline>
<TTimelineItem IconName="IconName.Pin" Label="2022-10-1">事件1</TTimelineItem>
<TTimelineItem IconName="IconName.Heart"Label="2022-10-11">事件2</TTimelineItem>
<TTimelineItem IconName="IconName.User" Label="2022-10-21">事件3</TTimelineItem>
</TTimeline>
<br />
<TTimeline Horizontal>
<TTimelineItem IconName="IconName.Pin" Label="2022-10-1">事件1</TTimelineItem>
<TTimelineItem IconName="IconName.Heart" Label="2022-10-11">事件2</TTimelineItem>
<TTimelineItem IconName="IconName.User" Label="2022-10-21">事件3</TTimelineItem>
</TTimeline>
</RunContent>
<CodeContent>
@Code.Create(@"
```html
<TTimeline>
<TTimelineItem IconName=""IconName.Pin"" Label=""2022-10-1"">事件1</TTimelineItem>
<TTimelineItem IconName=""IconName.Heart""Label=""2022-10-11"">事件2</TTimelineItem>
<TTimelineItem IconName=""IconName.User"" Label=""2022-10-21"">事件3</TTimelineItem>
</TTimeline>
<br />
<TTimeline Horizontal>
<TTimelineItem IconName=""IconName.Pin"" Label=""2022-10-1"">事件1</TTimelineItem>
<TTimelineItem IconName=""IconName.Heart"" Label=""2022-10-11"">事件2</TTimelineItem>
<TTimelineItem IconName=""IconName.User"" Label=""2022-10-21"">事件3</TTimelineItem>
</TTimeline>
```
")
</CodeContent>
</Example>

<Example Title="主题色">
<Description></Description>
<RunContent>
<TTimeline>
<TTimelineItem Label="2022-10-1" Color="Color.Primary">事件1</TTimelineItem>
<TTimelineItem Label="2022-10-11" Color="Color.Warning">事件2</TTimelineItem>
<TTimelineItem Label="2022-10-21" Color="Color.Success">事件3</TTimelineItem>
<TTimelineItem Label="2022-10-21" Color="Color.Error">事件4</TTimelineItem>
</TTimeline>
<br />
<TTimeline Horizontal>
<TTimelineItem Label="2022-10-1" Color="Color.Primary">事件1</TTimelineItem>
<TTimelineItem Label="2022-10-11" Color="Color.Warning">事件2</TTimelineItem>
<TTimelineItem Label="2022-10-21" Color="Color.Success">事件3</TTimelineItem>
<TTimelineItem Label="2022-10-21" Color="Color.Error">事件4</TTimelineItem>
</TTimeline>
</RunContent>
<CodeContent>
@Code.Create(@"
```html
<TTimeline>
<TTimelineItem Label=""2022-10-1"" Color=""Color.Primary"">事件1</TTimelineItem>
<TTimelineItem Label=""2022-10-11"" Color=""Color.Warning"">事件2</TTimelineItem>
<TTimelineItem Label=""2022-10-21"" Color=""Color.Success"">事件3</TTimelineItem>
<TTimelineItem Label=""2022-10-21"" Color=""Color.Error"">事件4</TTimelineItem>
</TTimeline>

<TTimeline Horizontal>
<TTimelineItem Label=""2022-10-1"" Color=""Color.Primary"">事件1</TTimelineItem>
<TTimelineItem Label=""2022-10-11"" Color=""Color.Warning"">事件2</TTimelineItem>
<TTimelineItem Label=""2022-10-21"" Color=""Color.Success"">事件3</TTimelineItem>
<TTimelineItem Label=""2022-10-21"" Color=""Color.Error"">事件4</TTimelineItem>
</TTimeline>
```
")
</CodeContent>
</Example>
30 changes: 15 additions & 15 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"dependencies": {
"tdesign-vue": "^0.46.1"
"tdesign-vue": "^0.50.1"
}
}
94 changes: 94 additions & 0 deletions src/TDesign.Test/Components/TimelineTest.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
using ComponentBuilder;

namespace TDesign.Test.Components;
public class TimelineTest : TestBase<TTimeline>
{
[Fact(DisplayName = "Timeline - 渲染")]
public void Test_Render()
{
var component = GetComponent(m => m.AddChildContent(builder =>
{
builder.CreateComponent<TTimelineItem>(0, "事件一", new { Label = "2022-01-01" });
}));

component.Should().HaveTag("ul").And.HaveClass("t-timeline").And.HaveClass("t-timeline-left").And.HaveClass("t-timeline-vertical")
.And.HaveClass("t-timeline-label--same").And.HaveClass("t-timeline-label");


var item = component.FindComponent<TTimelineItem>();

item.Should().NotBeNull().And.HaveTag("li").And.HaveClass("t-timeline-item").And.HaveClass("t-timeline-item-left");

var wrapper = item.Find(".t-timeline-item__wrapper");
wrapper.Should().NotBeNull().And.HaveTag("div");

var dot = wrapper.Children[0];
dot.Should().NotBeNull().And.HaveClass("t-timeline-item__dot").And.HaveClass("t-timeline-item__dot--primary");

NotEmpty(dot.Children);

dot.Children[0].Should().NotBeNull().And.HaveClass("t-timeline-item__dot-content");

var tail = wrapper.LastElementChild;
tail.Should().NotBeNull().And.HaveClass("t-timeline-item__tail").And.HaveClass("t-timeline-item__tail--theme-default")
.And.HaveClass("t-timeline-item__tail--status-primary");


var content = item.Find(".t-timeline-item__content");
content.Should().NotBeNull();

content.FirstElementChild.Should().NotBeNull().And.HaveClass("t-timeline-item__label").And.HaveClass("t-timeline-item__label--same")
;




component.MarkupMatches(@"
<ul class=""t-timeline t-timeline-left t-timeline-vertical t-timeline-label--same t-timeline-label"">
<li class=""t-timeline-item t-timeline-item-left "">
<div class=""t-timeline-item__wrapper"">
<div class=""t-timeline-item__dot t-timeline-item__dot--primary"">
<div class=""t-timeline-item__dot-content""></div>
</div>
<div class=""t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-primary"">
</div>
</div>
<div class=""t-timeline-item__content"">
事件一
<div class=""t-timeline-item__label t-timeline-item__label--same"">2022-01-01</div>
</div>
</li>
</ul>
");


}

[Fact(DisplayName = "Timeline - 基础时间轴 - 垂直")]
public void Test_Basic_Timeline_Vertical()
{
GetComponent().Should().HaveClass("t-timeline-vertical");
}

[Fact(DisplayName = "Timeline - 基础时间轴 - 水平")]
public void Test_Basic_Timeline_Horizontal()
{
GetComponent(m => m.Add(p => p.Horizontal, true)).Should().HaveClass("t-timeline-horizontal");
}

[Theory(DisplayName = "Timeline - 不同的颜色 Color")]
[InlineData(new object[] { Color.Primary })]
[InlineData(new object[] { Color.Success })]
[InlineData(new object[] { Color.Warning })]
[InlineData(new object[] { Color.Error })]
public void Test_Timeline_With_Different_Color(Color color)
{
var item = GetComponent(m => m.AddChildContent(builder =>
{
builder.CreateComponent<TTimelineItem>(0, attributes: new { Color = color });
})).FindComponent<TTimelineItem>().Find(".t-timeline-item__dot");


item.Should().HaveClass($"t-timeline-item__dot--{color.ToString().ToLower()}");
}
}
Loading

0 comments on commit 3912901

Please sign in to comment.