Skip to content

Commit ef33295

Browse files
jikkaijikkai
committed
Timeline: add timeline component (#11736)
* Timeline: add timeline component * Timeline: add timeline component * Timeline: add test case * Timeline: fix icon class * Timeline: update docs * Timeline: fix test case * Timeline: remove pending attribute * Timeline: fix docs * Timeline: make reverse default to false * Timline: fix test case * Timeline: update element-ui.d.ts * Timeline: optimize code
1 parent c71ad7f commit ef33295

File tree

18 files changed

+1116
-2
lines changed

18 files changed

+1116
-2
lines changed

‎components.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,5 +67,7 @@
6767
"header": "./packages/header/index.js",
6868
"aside": "./packages/aside/index.js",
6969
"main": "./packages/main/index.js",
70-
"footer": "./packages/footer/index.js"
70+
"footer": "./packages/footer/index.js",
71+
"timeline": "./packages/timeline/index.js",
72+
"timeline-item": "./packages/timeline-item/index.js"
7173
}

‎examples/docs/en-US/timeline.md

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
<script>
2+
export default {
3+
data() {
4+
return {
5+
reverse: true,
6+
activities: [{
7+
content: 'Event start',
8+
timestamp: '2018-04-15'
9+
}, {
10+
content: 'Approved',
11+
timestamp: '2018-04-13'
12+
}, {
13+
content: 'Success',
14+
timestamp: '2018-04-11'
15+
}],
16+
activities2: [{
17+
content: 'Custom icon',
18+
timestamp: '2018-04-12 20:46',
19+
size: 'large',
20+
type: 'primary',
21+
icon: 'el-icon-more'
22+
}, {
23+
content: 'Custom color',
24+
timestamp: '2018-04-03 20:46',
25+
color: '#0bbd87'
26+
}, {
27+
content: 'Custom size',
28+
timestamp: '2018-04-03 20:46',
29+
size: 'large'
30+
}, {
31+
content: 'Default node',
32+
timestamp: '2018-04-03 20:46'
33+
}]
34+
};
35+
}
36+
};
37+
</script>
38+
<style>
39+
.demo-timeline .source .radio {
40+
margin-bottom: 20px;
41+
}
42+
.demo-timeline .source .radio .el-radio-group {
43+
margin-left: 20px;
44+
}
45+
</style>
46+
47+
## Timeline
48+
49+
Visually display timeline.
50+
51+
### Basic usage
52+
53+
Timeline can be split into multiple activities in ascending or descending. Timestamps are important features that distinguish them from other components. Note the difference with Steps.
54+
55+
:::demo
56+
```html
57+
<div class="block">
58+
<div class="radio">
59+
Order:
60+
<el-radio-group v-model="reverse">
61+
<el-radio :label="true">descending</el-radio>
62+
<el-radio :label="false">ascending</el-radio>
63+
</el-radio-group>
64+
</div>
65+
66+
<el-timeline :reverse="reverse">
67+
<el-timeline-item
68+
v-for="(activity, index) in activities"
69+
:key="index"
70+
:timestamp="activity.timestamp">
71+
{{activity.content}}
72+
</el-timeline-item>
73+
</el-timeline>
74+
</div>
75+
76+
<script>
77+
export default {
78+
data() {
79+
return {
80+
reverse: true,
81+
activities: [{
82+
content: 'Event start',
83+
timestamp: '2018-04-15'
84+
}, {
85+
content: 'Approved',
86+
timestamp: '2018-04-13'
87+
}, {
88+
content: 'Success',
89+
timestamp: '2018-04-11'
90+
}]
91+
};
92+
}
93+
};
94+
</script>
95+
```
96+
:::
97+
98+
### Custom node
99+
100+
Size, color, and icons can be customized in node.
101+
102+
:::demo
103+
```html
104+
<div class="block">
105+
<el-timeline>
106+
<el-timeline-item
107+
v-for="(activity, index) in activities2"
108+
:key="index"
109+
:icon="activity.icon"
110+
:type="activity.type"
111+
:color="activity.color"
112+
:size="activity.size"
113+
:timestamp="activity.timestamp">
114+
{{activity.content}}
115+
</el-timeline-item>
116+
</el-timeline>
117+
</div>
118+
119+
<script>
120+
export default {
121+
data() {
122+
return {
123+
activities2: [{
124+
content: 'Custom icon',
125+
timestamp: '2018-04-12 20:46',
126+
size: 'large',
127+
type: 'primary',
128+
icon: 'el-icon-more'
129+
}, {
130+
content: 'Custom color',
131+
timestamp: '2018-04-03 20:46',
132+
color: '#0bbd87'
133+
}, {
134+
content: 'Custom size',
135+
timestamp: '2018-04-03 20:46',
136+
size: 'large'
137+
}, {
138+
content: 'Default node',
139+
timestamp: '2018-04-03 20:46'
140+
}]
141+
};
142+
}
143+
};
144+
</script>
145+
```
146+
:::
147+
148+
### Custom timestamp
149+
150+
Timestamp can be placed on top of content when content is too high.
151+
152+
:::demo
153+
```html
154+
<div class="block">
155+
<el-timeline>
156+
<el-timeline-item timestamp="2018/4/12" placement="top">
157+
<el-card>
158+
<h4>Update Github template</h4>
159+
<p>Tom committed 2018/4/12 20:46</p>
160+
</el-card>
161+
</el-timeline-item>
162+
<el-timeline-item timestamp="2018/4/3" placement="top">
163+
<el-card>
164+
<h4>Update Github template</h4>
165+
<p>Tom committed 2018/4/3 20:46</p>
166+
</el-card>
167+
</el-timeline-item>
168+
<el-timeline-item timestamp="2018/4/2" placement="top">
169+
<el-card>
170+
<h4>Update Github template</h4>
171+
<p>Tom committed 2018/4/2 20:46</p>
172+
</el-card>
173+
</el-timeline-item>
174+
</el-timeline>
175+
</div>
176+
```
177+
:::
178+
179+
### Timeline Attributes
180+
| Attribute | Description | Type | Accepted Values | Default |
181+
|---------- |-------- |---------- |------------- |-------- |
182+
| reverse | whether the node is ascending or descending, default is ascending | boolean | — | false |
183+
184+
### Timeline-item Attributes
185+
| Attribute | Description | Type | Accepted Values | Default |
186+
|---------- |-------- |---------- |------------- |-------- |
187+
| timestamp | timestamp content | string | - | — |
188+
| hide-timestamp | whether to show timestamp | boolean | — | false |
189+
| placement | position of timestamp | string | top / bottom | bottom |
190+
| type | node type | string | primary / success / warning / danger / info | - |
191+
| color | background color of node | string | hsl / hsv / hex / rgb | - |
192+
| size | node size | string | normal / large | normal |
193+
| icon | icon class name | string | — | - |
194+
195+
### Timeline-Item Slot
196+
| name | Description |
197+
|------|--------|
198+
| — | Custom content for timeline item |
199+
| dot | Custom defined node |

0 commit comments

Comments
 (0)