SxTimeline (时间轴)

  • Implemented

垂直展示时间流或操作历史。对齐 NextUI 扩展 规范，并说明当前实现状态。

使用场景

  • 操作记录与日志
  • 项目进度时间线
  • 流程节点展示

约束说明

  • Items 与 ItemTemplate 同时提供时使用模板渲染。
  • ChildContent 与 Items 可同时使用。

行为说明

  • Active 控制当前节点高亮。
  • Color 控制节点圆点边框颜色。

API

Parameters (SxTimeline)

状态 参数名 类型 默认值 描述
Implemented Items IEnumerable<object>? null 时间轴数据源。
Implemented ItemTemplate RenderFragment<object>? null 数据模板。
Implemented ChildContent RenderFragment? null 自定义内容。
Implemented Id (继承) string? null 组件的物理 Id。
Implemented Class (继承) string? null 自定义 CSS 类名。
Implemented Style (继承) string? null 自定义样式。
Implemented Title (继承) string? null HTML title 属性。
Implemented AdditionalAttributes (继承) IEnumerable<KeyValuePair<string, object>>? null 捕获不匹配的 HTML 属性。

Parameters (SxTimelineItem)

状态 参数名 类型 默认值 描述
Implemented HeaderText string "" 标题文本。
Implemented HeaderTextContent RenderFragment? null 标题自定义内容。
Implemented Time string? null 时间文本。
Implemented ChildContent RenderFragment? null 内容区。
Implemented Color string? null 节点颜色。
Implemented Active bool false 是否高亮。
Implemented Disabled (继承) bool false 禁用状态。
Implemented Id (继承) string? null 组件的物理 Id。
Implemented Class (继承) string? null 自定义 CSS 类名。
Implemented Style (继承) string? null 自定义样式。
Implemented Title (继承) string? null HTML title 属性。
Implemented AdditionalAttributes (继承) IEnumerable<KeyValuePair<string, object>>? null 捕获不匹配的 HTML 属性。

示例

<SxTimeline>
    <SxTimelineItem Time="2026-01-01" HeaderText="项目立项">内容</SxTimelineItem>
</SxTimeline>

参考设计 (References)

在 Playground 中打开 →