aardio 文档

Timeline 时间轴

Timeline 用于垂直展示事件流、审批流、日志记录、版本更新记录等。它强调“发生过什么”，通常用于补充 Steps 的当前流程状态。

最小示例

import win.ui;
/*DSG{{*/
var winform = win.form(text="AntdUI Timeline";right=680;bottom=420)
winform.add(host={cls="custom";left=20;top=20;right=650;bottom=380;db=1;dl=1;dr=1;dt=1;z=1})
/*}}*/

import dotNet.AntdUI;

// AntdUI.Timeline(winform.host) 会自动填充 custom 宿主。
var timeline = AntdUI.Timeline(winform.host);
timeline.Gap = 16;

timeline.Items.Add(AntdUI.TimelineItem("提交申请","用户提交表单").SetType(AntdUI.TTypeMini.Primary));
timeline.Items.Add(AntdUI.TimelineItem("审核中","等待管理员审核").SetType(AntdUI.TTypeMini.Warn));
timeline.Items.Add(AntdUI.TimelineItem("已完成","流程结束").SetType(AntdUI.TTypeMini.Success));

timeline.ItemClick = function(sender,e){
    var item = e.Item;
    winform.text = "点击：" + item.Text;
}

winform.show();
win.loopMessage();

自定义颜色与图标

TimelineItem.Type 适合使用主题色；如果需要特定节点颜色，可设置 Fill。自定义 SVG 图标可设置 IconSvg。

import win.ui;
import dotNet.AntdUI;
import System.Drawing;
/*DSG{{*/
var winform = win.form(text="Timeline 自定义节点";right=720;bottom=420)
winform.add(host={cls="custom";left=20;top=20;right=690;bottom=380;db=1;dl=1;dr=1;dt=1;z=1})
/*}}*/

var timeline = AntdUI.Timeline(winform.host);

var item1 = AntdUI.TimelineItem("构建完成","CI 已生成安装包");
item1.ID = "build";
item1.Type = AntdUI.TTypeMini.Success;
timeline.Items.Add(item1);

var item2 = AntdUI.TimelineItem("人工复核","等待测试负责人确认");
item2.ID = "review";
item2.Fill = 0xFFFAAD14;
item2.IconSvg = `<svg viewBox="0 0 1024 1024"><path d="M512 64l448 832H64z"/></svg>`;
timeline.Items.Add(item2);

winform.show();
win.loopMessage();

常用属性

成员 说明
Items 时间轴项集合，添加 AntdUI.TimelineItem。这是 .NET 集合，索引从 0 开始。
ForeColor 标题文字颜色；aardio 中直接使用 0xAARRGGBB 数值。
FontDescription 描述文字字体。
Gap 项目间距，int?。
PauseLayout 批量更新时暂停布局。大量添加项时先设为 true，添加完恢复为 false。
ItemClick 点击时间轴项事件，事件对象 e.Item 为 TimelineItem。

TimelineItem

属性 说明
ID / Name 业务标识或名称。
Text 标题文本。
Description 描述文本。
LocalizationText / LocalizationDescription 本地化键。
Type 颜色类型，常用 AntdUI.TTypeMini.Default/Primary/Success/Error/Warn/Info。
Fill 自定义节点颜色；aardio 中直接使用 0xAARRGGBB 数值。设置后可覆盖主题类型颜色。
Icon / IconSvg 自定义图标。
Visible 是否显示。
Tag 用户自定义数据，可保存业务 key 或对象。

TimelineItem 支持链式方法：SetType()、SetFill()、SetID()、SetName()、SetText()、SetDescription()、SetIcon()、SetVisible()、SetTag()。

枚举速查

TimelineItem.Type 常用枚举：

事件参数

ItemClick 的事件委托参数为 (sender,e)，被点击的时间轴项在 e.Item 中：

timeline.ItemClick = function(sender,e){
    var item = e.Item;
    winform.text = item.ID + " / " + item.Text;
}

e 还继承常见鼠标事件信息，例如 e.Button、e.Clicks、e.X、e.Y、e.Location。

注意

Markdown 格式