Skip to content

Commit 7ff7790

Browse files
vaebevaebe
committed
feat: 文档完善
1 parent 3102a10 commit 7ff7790

File tree

3 files changed

+177
-91
lines changed

3 files changed

+177
-91
lines changed

‎packages/ccui/ui/timeline/src/timeline-types.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ export const timelineProps = {
77

88
export type TimelineProps = ExtractPropTypes<typeof timelineProps>
99

10+
export type TimelineItemType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | ''
11+
1012
// TimelineItem 组件的 props
1113
export const timelineItemProps = {
1214
/**
@@ -42,7 +44,7 @@ export const timelineItemProps = {
4244
* 节点类型
4345
*/
4446
type: {
45-
type: String as PropType<'primary' | 'success' | 'warning' | 'danger' | 'info' | ''>,
47+
type: String as PropType<TimelineItemType>,
4648
default: '',
4749
validator: (value: string) => ['primary', 'success', 'warning', 'danger', 'info', ''].includes(value),
4850
},

‎packages/docs/components/divider/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export default defineComponent({
8282
| color | string | -- | 设置分隔线的颜色 |
8383
| direction | [DirectionType](#directiontype) | horizontal | 设置分隔线方向 |
8484
| border-style | [BorderStyleType](#borderstyletype) | solid | 设置分隔符样式 |
85-
| content-position | [ContentPositionType](#Contentpositiontype) | center | 设置分隔线文案的位置 |
85+
| content-position | [ContentPositionType](#contentpositiontype) | center | 设置分隔线文案的位置 |
8686
| content-color | string | -- | 设置分隔线文案的颜色 |
8787
| content-background-color | string | -- | 设置分隔线文案的背景颜色 |
8888

‎packages/docs/components/timeline/index.md‎

Lines changed: 173 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,18 @@
22

33
可视化地呈现时间流信息。
44

5-
### 何时使用
5+
## 何时使用
66

77
- 当有一系列信息需按时间排列时
88
- 需要有一条时间轴进行视觉上的串联时
99

10-
### 基本用法
10+
## 基本用法
1111

1212
Timeline 可拆分成多个按照时间戳排列的活动，时间戳是其区分于其他控件的重要特征。
1313

1414
:::demo
1515

1616
```vue
17-
<template>
18-
<c-timeline>
19-
<c-timeline-item timestamp="2018/4/12">
20-
<p>更新 Github 模板</p>
21-
</c-timeline-item>
22-
<c-timeline-item timestamp="2018/4/3">
23-
<p>更新 Github 模板</p>
24-
</c-timeline-item>
25-
<c-timeline-item timestamp="2018/4/2">
26-
<p>更新 Github 模板</p>
27-
</c-timeline-item>
28-
</c-timeline>
29-
</template>
30-
3117
<script>
3218
import { defineComponent } from 'vue'
3319
@@ -37,34 +23,36 @@ export default defineComponent({
3723
}
3824
})
3925
</script>
26+
27+
<template>
28+
<div class="demo-timeline-basic">
29+
<c-timeline>
30+
<c-timeline-item timestamp="2018/4/12">
31+
<p>更新 Github 模板</p>
32+
</c-timeline-item>
33+
<c-timeline-item timestamp="2018/4/3">
34+
<p>更新 Github 模板</p>
35+
</c-timeline-item>
36+
<c-timeline-item timestamp="2018/4/2">
37+
<p>更新 Github 模板</p>
38+
</c-timeline-item>
39+
</c-timeline>
40+
</div>
41+
</template>
42+
43+
<style>
44+
</style>
4045
```
4146

4247
:::
4348

44-
### 自定义节点样式
49+
## 自定义节点样式
4550

4651
可根据实际场景自定义节点尺寸、颜色，或直接使用图标。
4752

4853
:::demo
4954

5055
```vue
51-
<template>
52-
<c-timeline>
53-
<c-timeline-item timestamp="2018/4/12" type="primary">
54-
<p>支持使用图标</p>
55-
</c-timeline-item>
56-
<c-timeline-item timestamp="2018/4/3" color="#0bbd87">
57-
<p>支持自定义颜色</p>
58-
</c-timeline-item>
59-
<c-timeline-item timestamp="2018/4/2" size="large">
60-
<p>支持自定义尺寸</p>
61-
</c-timeline-item>
62-
<c-timeline-item timestamp="2018/4/1" type="warning" hollow>
63-
<p>支持空心点</p>
64-
</c-timeline-item>
65-
</c-timeline>
66-
</template>
67-
6856
<script>
6957
import { defineComponent } from 'vue'
7058
@@ -74,40 +62,39 @@ export default defineComponent({
7462
}
7563
})
7664
</script>
65+
66+
<template>
67+
<div class="demo-timeline-node">
68+
<c-timeline>
69+
<c-timeline-item timestamp="2018/4/12" type="primary">
70+
<p>支持使用图标</p>
71+
</c-timeline-item>
72+
<c-timeline-item timestamp="2018/4/3" color="#0bbd87">
73+
<p>支持自定义颜色</p>
74+
</c-timeline-item>
75+
<c-timeline-item timestamp="2018/4/2" size="large">
76+
<p>支持自定义尺寸</p>
77+
</c-timeline-item>
78+
<c-timeline-item timestamp="2018/4/1" type="warning" hollow>
79+
<p>支持空心点</p>
80+
</c-timeline-item>
81+
</c-timeline>
82+
</div>
83+
</template>
84+
85+
<style>
86+
</style>
7787
```
7888

7989
:::
8090

81-
### 自定义时间戳
91+
## 自定义时间戳
8292

8393
当内容在垂直方向上过高时，可将时间戳置于内容之上。
8494

8595
:::demo
8696

8797
```vue
88-
<template>
89-
<c-timeline>
90-
<c-timeline-item timestamp="2018/4/12" placement="top">
91-
<div>
92-
<h4>更新 Github 模板</h4>
93-
<p>Tom 在 2018/4/12 20:46 提交了更新</p>
94-
</div>
95-
</c-timeline-item>
96-
<c-timeline-item timestamp="2018/4/3" placement="top">
97-
<div>
98-
<h4>更新 Github 模板</h4>
99-
<p>Tom 在 2018/4/3 20:46 提交了更新</p>
100-
</div>
101-
</c-timeline-item>
102-
<c-timeline-item timestamp="2018/4/2" placement="top">
103-
<div>
104-
<h4>更新 Github 模板</h4>
105-
<p>Tom 在 2018/4/2 20:46 提交了更新</p>
106-
</div>
107-
</c-timeline-item>
108-
</c-timeline>
109-
</template>
110-
11198
<script>
11299
import { defineComponent } from 'vue'
113100
@@ -117,34 +104,87 @@ export default defineComponent({
117104
}
118105
})
119106
</script>
107+
108+
<template>
109+
<div class="demo-timeline-timestamp">
110+
<c-timeline>
111+
<c-timeline-item timestamp="2018/4/12" placement="top">
112+
<div>
113+
<h4>更新 Github 模板</h4>
114+
<p>Tom 在 2018/4/12 20:46 提交了更新</p>
115+
</div>
116+
</c-timeline-item>
117+
<c-timeline-item timestamp="2018/4/3" placement="top">
118+
<div>
119+
<h4>更新 Github 模板</h4>
120+
<p>Tom 在 2018/4/3 20:46 提交了更新</p>
121+
</div>
122+
</c-timeline-item>
123+
<c-timeline-item timestamp="2018/4/2" placement="top">
124+
<div>
125+
<h4>更新 Github 模板</h4>
126+
<p>Tom 在 2018/4/2 20:46 提交了更新</p>
127+
</div>
128+
</c-timeline-item>
129+
</c-timeline>
130+
</div>
131+
</template>
132+
133+
<style>
134+
</style>
120135
```
121136

122137
:::
123138

124-
### 垂直居中
139+
## 垂直居中
125140

126141
垂直居中样式的 Timeline-Item。
127142

128143
:::demo
129144

130145
```vue
146+
<script>
147+
import { defineComponent } from 'vue'
148+
149+
export default defineComponent({
150+
setup() {
151+
return {}
152+
}
153+
})
154+
</script>
155+
131156
<template>
132-
<c-timeline>
133-
<c-timeline-item timestamp="2018/4/12" center>
134-
<div>
135-
<h4>更新 Github 模板</h4>
136-
<p>Tom 在 2018/4/12 20:46 提交了更新</p>
137-
</div>
138-
</c-timeline-item>
139-
<c-timeline-item timestamp="2018/4/3" center>
140-
<div>
141-
<h4>更新 Github 模板</h4>
142-
<p>Tom 在 2018/4/3 20:46 提交了更新</p>
143-
</div>
144-
</c-timeline-item>
145-
</c-timeline>
157+
<div class="demo-timeline-center">
158+
<c-timeline>
159+
<c-timeline-item timestamp="2018/4/12" center>
160+
<div>
161+
<h4>更新 Github 模板</h4>
162+
<p>Tom 在 2018/4/12 20:46 提交了更新</p>
163+
</div>
164+
</c-timeline-item>
165+
<c-timeline-item timestamp="2018/4/3" center>
166+
<div>
167+
<h4>更新 Github 模板</h4>
168+
<p>Tom 在 2018/4/3 20:46 提交了更新</p>
169+
</div>
170+
</c-timeline-item>
171+
</c-timeline>
172+
</div>
146173
</template>
147174
175+
<style>
176+
</style>
177+
```
178+
179+
:::
180+
181+
## 自定义节点
182+
183+
可以通过插槽自定义节点。
184+
185+
:::demo
186+
187+
```vue
148188
<script>
149189
import { defineComponent } from 'vue'
150190
@@ -154,38 +194,82 @@ export default defineComponent({
154194
}
155195
})
156196
</script>
197+
198+
<template>
199+
<div class="demo-timeline-dot">
200+
<c-timeline>
201+
<c-timeline-item timestamp="2018/4/12">
202+
<template #dot>
203+
<div style="width: 16px; height: 16px; background: #409eff; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
204+
<span style="color: white; font-size: 10px;">✓</span>
205+
</div>
206+
</template>
207+
<p>自定义节点内容</p>
208+
</c-timeline-item>
209+
<c-timeline-item timestamp="2018/4/3" type="success">
210+
<p>普通节点</p>
211+
</c-timeline-item>
212+
</c-timeline>
213+
</div>
214+
</template>
215+
216+
<style>
217+
</style>
157218
```
158219

159220
:::
160221

161-
## Timeline API
222+
## API
223+
224+
### Timeline Props
162225

163-
### Timeline 插槽
226+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
227+
| ---- | ---- | ---- | ---- | ---- |
228+
| — | — | — | — | — |
229+
230+
### Timeline Events
231+
232+
| 事件名 | 说明 | 回调参数 |
233+
| ---- | ---- | ---- |
234+
| — | — | — |
235+
236+
### Timeline Slots
164237

165238
| 插槽名 | 说明 | 子标签 |
166239
| ---- | ---- | ---- |
167240
| default | timeline 组件的自定义默认内容 | Timeline-Item |
168241

169-
## Timeline-Item API
242+
### Timeline-Item Props
243+
244+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
245+
| ---- | -------- | ---- | ---- | ---- |
246+
| timestamp | 时间戳 | string | — | '' |
247+
| hide-timestamp | 是否隐藏时间戳 | boolean | — | false |
248+
| center | 是否垂直居中 | boolean | — | false |
249+
| placement | 时间戳位置 | string | top/bottom | bottom |
250+
| type | 节点类型 | string | [TimelineItemType](#timelineitemtype) | — |
251+
| color | 节点颜色 | string | — | — |
252+
| size | 节点尺寸 | string | normal/large | normal |
253+
| icon | 自定义图标 | string/Component | — | — |
254+
| hollow | 是否空心点 | boolean | — | false |
170255

171-
### Timeline-Item 属性
256+
### Timeline-Item Events
172257

173-
| 参数 | 类型 | 默认值 | 说明 |
174-
| ---- | ---- | ---- | ---- |
175-
| timestamp | string | '' | 时间戳 |
176-
| hide-timestamp | boolean | false | 是否隐藏时间戳 |
177-
| center | boolean | false | 是否垂直居中 |
178-
| placement | 'top' \| 'bottom' | 'bottom' | 时间戳位置 |
179-
| type | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| '' | '' | 节点类型 |
180-
| color | string | '' | 节点颜色 |
181-
| size | 'normal' \| 'large' | 'normal' | 节点尺寸 |
182-
| icon | string \| Component | — | 自定义图标 |
183-
| hollow | boolean | false | 是否空心点 |
258+
| 事件名 | 说明 | 回调参数 |
259+
| ---- | ---- | ---- |
260+
| — | — | — |
184261

185-
### Timeline-Item 插槽
262+
### Timeline-Item Slots
186263

187264
| 插槽名 | 说明 |
188265
| ---- | ---- |
189266
| default | 自定义内容 |
190267
| dot | 自定义节点 |
191268

269+
## Divider类型定义
270+
271+
### TimelineItemType
272+
273+
```ts
274+
export type TimelineItemType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | ''
275+
```

0 commit comments

Comments
 (0)