Ant Design Blazor
Timeline时间轴
垂直展示的时间流信息。
何时使用
- 当有一系列信息需按时间排列时，可正序和倒序。
- 需要有一条时间轴进行视觉上的串联时。
Examples
最简单的用法。
当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，当 pending 为真值时展示幽灵节点，如果 pending 是 React 元素可用于定制该节点内容，同时 pendingDot 将可以用于定制其轴点。reverse 属性用于控制节点排序，为 false 时按正序排列，为 true 时按倒序排列。
可以设置为图标或其他自定义元素。
使用 label 标签单独展示时间。
Timeline API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Mode | 属性该行与项目相关的位置 - 左、右或交替 | TimelineMode? | left |
| Reverse | 属性是否反转节点 | Boolean | false |
| Pending | 属性设置最后一个幽灵节点的存在或其内容 | OneOf<String, RenderFragment> | -- |
| PendingDot | 属性pending为真时设置最后一个ghost节点的dot | RenderFragment | -- |
| ChildContent | 属性时间轴的内容。应包含 TimelineItem 元素 |
RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
TimelineItem API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| ChildContent | 属性时间线项的内容。 | RenderFragment | -- |
| Dot | 属性时间线项的点。 | RenderFragment | -- |
| Color | 属性时间线项的颜色。 | String | -- |
| Label | 属性时间线项的标签。 | String | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |