使用import { Timeline } from 'antd'; |
文档贡献者
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| items | 选项配置 | Items[] | - | |
| mode | 通过设置 mode 可以改变时间轴和内容的相对位置 | start | alternate | end | start | |
| orientation | 设置时间轴的方向 | vertical | horizontal | vertical | |
指定最后一个幽灵节点是否存在或内容，请使用 item.loading 代替 | ReactNode | false | ||
当最后一个幽灵节点存在時，指定其时间图点，请使用 item.icon 代替 | ReactNode | <LoadingOutlined /> | ||
| reverse | 节点排序 | boolean | false | |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| titleSpan | 设置标题占比空间，为到 dot 中心点距离 | number | string | 12 | |
| variant | 设置样式变体 | filled | outlined | outlined |
时间轴的每一个节点。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| color | 指定圆圈颜色 blue、red、green、gray，或自定义的色值 | string | blue |
| content | 设置内容 | ReactNode | - |
设置内容，请使用 content 替换 | ReactNode | - | |
自定义时间轴点，请使用 icon 替换 | ReactNode | - | |
| icon | 自定义节点图标 | ReactNode | - |
设置标签，请使用 title 替换 | ReactNode | - | |
| loading | 设置加载状态 | boolean | false |
| placement | 自定义节点位置 | start | end | - |
自定义节点位置，请使用 placement 替换 | start | end | - | |
| title | 设置标题 | ReactNode | - |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| dotBg | 节点背景色 | string | |
| dotBorderWidth | 节点边框宽度 | string | number | 2 |
| dotSize | 节点大小 | string | number | |
| itemPaddingBottom | 时间项下间距 | number | 20 |
| tailColor | 轨迹颜色 | string | rgba(5,5,5,0.06) |
| tailWidth | 轨迹宽度 | string | number | 2 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorError | 用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。 | string | #ff4d4f |
| colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义 | string | #1677ff |
| colorSuccess | 用于表示操作成功的 Token 序列，如 Result、Progress 等组件会使用该组梯度变量。 | string | #52c41a |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| colorTextDisabled | 控制禁用状态下的字体颜色。 | string | rgba(0,0,0,0.25) |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
| margin | 控制元素外边距，中等尺寸。 | number | 16 |
| paddingXS | 控制元素的特小内间距。 | number | 8 |
| paddingXXS | 控制元素的极小内间距。 | number | 4 |
