logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

Timeline时间轴

Examples

最简单的用法。

expand code expand code

当任务状态正在发生,还在记录过程中,可用幽灵节点来表示当前的时间节点,当 pending 为真值时展示幽灵节点,如果 pending 是 React 元素可用于定制该节点内容,同时 pendingDot 将可以用于定制其轴点。reverse 属性用于控制节点排序,为 false 时按正序排列,为 true 时按倒序排列。

expand code expand code

可以设置为图标或其他自定义元素。

expand code expand code

使用 label 标签单独展示时间。

expand code expand code

圆圈颜色,绿色用于已完成、成功状态,红色表示告警或错误状态,蓝色可表示正在进行或其他默认状态,灰色表示未完成或失效状态。

expand code expand code

内容在时间轴两侧轮流出现。

expand code expand code

时间轴点可以在内容的右边。

expand code expand code

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 --
Tag标签 Tooltip文字提示
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.