Timeline 时间线
Timeline 按顺序列出事件。每个 TimelineItem 有一个标记点、可选的标题、内容和时间,标记点之间用线连起来。
演示
基础用法
type 决定标记点的颜色:default、info、success、warning 或 error。最后一项后面没有连线。
尺寸
标记点位置
itemPlacement="right" 把标记点放在右侧,文字向它对齐。
水平排列
horizontal 让各项横向排列。lineType="dashed" 把到下一项的连线画成虚线。
图标和颜色
icon 替换圆形标记点,使用 type 对应的颜色;iconSize 统一设置整条时间线的标记点大小。color 给单独一项设置自定义颜色,建议从 Raft 色板 里取,这样能跟随主题。
Timeline Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
horizontal | boolean | false | 横向排列。 | 未发布 |
iconSize | number | undefined | 标记点大小(px)。默认取主题里对应 size 的大小。 | 未发布 |
itemPlacement | left | right | left | 标记点在哪一侧。horizontal 时无效。 | 未发布 |
size | medium | large | medium | 标记点和文字的大小。 | 未发布 |
TimelineItem Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
type | default | info | success | warning | error | default | 标记点的颜色角色。 | 未发布 |
title | ReactNode | undefined | 内容上方的标题。 | 未发布 |
content | ReactNode | undefined | 内容;有 children 时以 children 为准。 | 未发布 |
time | ReactNode | undefined | 显示在内容下方。 | 未发布 |
icon | ReactNode | undefined | 替换圆形标记点。 | 未发布 |
color | string | undefined | 自定义标记点颜色。 | 未发布 |
lineType | default | dashed | default | 到下一项的连线样式。 | 未发布 |
title 和 time 都接受任意 ReactNode。