aardio 文档

Steps 步骤条

AntdUI.Steps 用于展示流程进度，例如订单流转、工单处理、发布上线、审批进度等。它强调“当前流程走到哪一步”，如果还需要记录历史事件或处理日志，通常与 Timeline 组合使用。

重要：Steps.Current 与 steps.Items 使用 .NET/AntdUI 习惯，从 0 开始计数；aardio 普通数组仍从 1 开始。

最小示例

import win.ui;
import dotNet.AntdUI;
/*DSG{{*/
var winform = win.form(text="AntdUI Steps";right=760;bottom=260)
winform.add(host={cls="custom";left=0;top=0;right=760;bottom=260;db=1;dl=1;dr=1;dt=1;z=1})
/*}}*/

var steps = AntdUI.Steps(winform.host);
steps.Current = 1; // 0 基：当前为第 2 步
steps.Status = AntdUI.TStepState.Process;
steps.Gap = 12;

steps.Items.Add(AntdUI.StepsItem("创建订单","已完成","用户已提交订单"));
steps.Items.Add(AntdUI.StepsItem("支付","处理中","等待支付结果"));
steps.Items.Add(AntdUI.StepsItem("发货","待开始"));
steps.Items.Add(AntdUI.StepsItem("完成"));

steps.ItemClick = function(sender,e){
    var item = e.Item;
    winform.msgbox("点击步骤：" + item.Title);
}

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

里程碑模式示例

里程碑模式适合展示“每个阶段发生的时间点”。常用做法是为每个 StepsItem 设置 MilestoneTimePoint，并开启 MilestoneMode。

import win.ui;
import dotNet.AntdUI;
import System;
/*DSG{{*/
var winform = win.form(text="Steps 里程碑";right=820;bottom=260)
winform.add(host={cls="custom";left=20;top=20;right=790;bottom=220;db=1;dl=1;dr=1;dt=1;z=1})
/*}}*/

var steps = AntdUI.Steps(winform.host);
steps.Current = 2;
steps.Status = AntdUI.TStepState.Process;
steps.MilestoneMode = true;
steps.MilestoneType = AntdUI.TMilestoneType.Full;
steps.MilestoneCurrentCompleted = true;
steps.MilestoneTimeFormat = "MM-dd HH:mm";
steps.MilestoneTimelineThickness = 3;

var addStep = function(id,title,subTitle,description,month,day,hour,minute){
    var item = AntdUI.StepsItem(title,subTitle,description);
    item.ID = id;
    item.Tag = id;
    item.MilestoneTimePoint = System.DateTime(2026,month,day,hour,minute,0);
    steps.Items.Add(item);
}

addStep("submit","提交","已完成","申请人已提交资料",7,6,9,0);
addStep("review","审核","已完成","主管完成初审",7,6,10,30);
addStep("deploy","实施","进行中","工程师正在实施",7,6,14,0);
addStep("verify","验收","待开始","等待业务验收",7,7,9,30);

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

常用属性与事件

成员 说明
Items 步骤项集合，添加 AntdUI.StepsItem。这是 .NET 集合，索引从 0 开始。
Current 当前步骤索引，从 0 开始。
Status 当前步骤状态，常用 AntdUI.TStepState.Wait/Process/Finish/Error。
Vertical 是否垂直显示。
Gap 步骤间距。
ForeColor 文字颜色；aardio 中直接使用 0xAARRGGBB 数值。
PauseLayout 批量更新时暂停布局，添加大量项前设为 true，添加后恢复为 false。
MilestoneMode 是否启用里程碑模式。
MilestoneAnimation 里程碑动画。
MilestoneType 里程碑时间显示类型，常用 AntdUI.TMilestoneType.Day/Time/Full。
MilestoneCurrentCompleted 里程碑模式下当前步骤是否按已完成绘制。
MilestoneTimeFormat 里程碑时间格式，例如 "MM-dd HH:mm"。
MilestoneTimelineThickness 里程碑时间线粗细。
ItemClick 点击步骤项事件，事件对象 e.Item 为 StepsItem。

StepsItem 常用属性

属性 说明
ID / Name 业务标识或名称，适合绑定稳定 key。
Title 标题。
SubTitle 子标题。
Description 描述。
LocalizationTitle / LocalizationSubTitle / LocalizationDescription 本地化键。
Icon / IconSvg 图标。
IconSize 图标大小。
MilestoneTimePoint 里程碑时间点，System.DateTime?。
BackColor / ForeColor 单项背景色与文字色；aardio 中直接使用 0xAARRGGBB 数值。
Visible 是否显示。
Tag 自定义数据，可保存业务 key 或对象。

StepsItem 还提供链式方法：SetID()、SetName()、SetTitle()、SetSubTitle()、SetDescription()、SetIcon()、SetVisible()、SetTag()。

枚举速查

事件参数

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

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

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

注意事项

Markdown 格式