跳到正文

Timeline 时间线

Timeline 按顺序列出事件。每个 TimelineItem 有一个标记点、可选的标题、内容和时间,标记点之间用线连起来。

演示

基础用法

type 决定标记点的颜色:default、info、success、warning 或 error。最后一项后面没有连线。

尺寸

标记点位置

itemPlacement="right" 把标记点放在右侧,文字向它对齐。

水平排列

horizontal 让各项横向排列。lineType="dashed" 把到下一项的连线画成虚线。

图标和颜色

icon 替换圆形标记点,使用 type 对应的颜色;iconSize 统一设置整条时间线的标记点大小。color 给单独一项设置自定义颜色,建议从 Raft 色板 里取,这样能跟随主题。

Timeline Props

名称类型默认值说明版本
horizontalbooleanfalse横向排列。未发布
iconSizenumberundefined标记点大小(px)。默认取主题里对应 size 的大小。未发布
itemPlacementleft | rightleft标记点在哪一侧。horizontal 时无效。未发布
sizemedium | largemedium标记点和文字的大小。未发布

TimelineItem Props

名称类型默认值说明版本
typedefault | info | success | warning | errordefault标记点的颜色角色。未发布
titleReactNodeundefined内容上方的标题。未发布
contentReactNodeundefined内容;有 children 时以 children 为准。未发布
timeReactNodeundefined显示在内容下方。未发布
iconReactNodeundefined替换圆形标记点。未发布
colorstringundefined自定义标记点颜色。未发布
lineTypedefault | dasheddefault到下一项的连线样式。未发布

title 和 time 都接受任意 ReactNode。