[AntdUI] 06 Steps步骤条控件的创建及事件处理

nanyi 19小时前 52 v 1.0.0.0 2026-06-18

import win.ui;
import dotNet.AntdUI;
import dotNet;
/*DSG{{*/
var winform = win.form(text="AntdUI Steps / Timeline";right=1120;bottom=680;border="thin")
winform.add(
custom_base={cls="custom";left=0;top=0;right=1122;bottom=680;ah=1;aw=1;db=1;disabled=1;dl=1;dr=1;dt=1;hide=1;z=1};
custom_btn_error={cls="custom";left=875;top=172;right=995;bottom=212;dr=1;dt=1;z=6};
custom_btn_milestone={cls="custom";left=875;top=222;right=1055;bottom=262;dr=1;dt=1;z=7};
custom_btn_next={cls="custom";left=875;top=122;right=995;bottom=162;dr=1;dt=1;z=5};
custom_btn_prev={cls="custom";left=875;top=72;right=995;bottom=112;dr=1;dt=1;z=4};
custom_lbl_steps_status={cls="custom";left=28;top=168;right=835;bottom=205;dl=1;dr=1;dt=1;z=8};
custom_steps={cls="custom";left=28;top=70;right=835;bottom=155;dl=1;dr=1;dt=1;z=3};
custom_timeline={cls="custom";left=28;top=295;right=835;bottom=630;db=1;dl=1;dr=1;dt=1;z=10};
custom_title_steps={cls="custom";left=28;top=20;right=340;bottom=55;dl=1;dt=1;z=2};
custom_title_timeline={cls="custom";left=28;top=245;right=360;bottom=280;dl=1;dt=1;z=9}
)
/*}}*/

// Message.success 需要一个 AntdUI 窗体或控件作为归属对象。
var baseForm = AntdUI.BaseForm();
baseForm.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
baseForm.Dock = System.Windows.Forms.DockStyle.Fill;
dotNet.setParent(baseForm, winform.custom_base);

// ---------- 公共字体 ----------
var fontTitle = System.Drawing.Font("Microsoft YaHei", 14, System.Drawing.FontStyle.Bold);
var fontNormal = System.Drawing.Font("Microsoft YaHei", 10);
var fontTip = System.Drawing.Font("Microsoft YaHei", 9);

// ---------- 工具函数 ----------
var showSuccess = function(text){
    AntdUI.Message.success(baseForm, text);
}

var addHostLabel = function(host,text,font){
    var label = AntdUI.Label(host);
    label.Text = text;
    label.Font = font || fontNormal;
    label.Dock = System.Windows.Forms.DockStyle.Fill;
    return label;
}

var setStepsStatusText;

// ---------- 标题 ----------
addHostLabel(winform.custom_title_steps,"Steps",fontTitle);
addHostLabel(winform.custom_title_timeline,"Timeline",fontTitle);

// ---------- Steps 步骤条 ----------
var steps = AntdUI.Steps(winform.custom_steps);
steps.Dock = System.Windows.Forms.DockStyle.Fill;
steps.Font = fontNormal;
steps.Vertical = false;
steps.Current = 1;
steps.Status = AntdUI.TStepState.Process;
steps.Gap = 6;
steps.MilestoneMode = false;
steps.MilestoneCurrentCompleted = false;

// 只设置 Title,不设置 SubTitle / Description。
// 描述文字放到下方 lblStepsStatus 里展示。
var stepAccount = AntdUI.StepsItem("Account   ");
var stepVerify = AntdUI.StepsItem("Verify   ");
var stepPay = AntdUI.StepsItem("Payment   ");
var stepDone = AntdUI.StepsItem("Done   ");

stepAccount.Name = "account";
stepVerify.Name = "verify";
stepPay.Name = "payment";
stepDone.Name = "done";

steps.Items.Add(stepAccount);
steps.Items.Add(stepVerify);
steps.Items.Add(stepPay);
steps.Items.Add(stepDone);

// 单独维护步骤说明,避免占用 Steps 内部连接线布局。
var stepDescriptions = [
    "Create account",
    "Verify identity information",
    "Complete payment",
    "Order finished"
];

var lblStepsStatus = AntdUI.Label(winform.custom_lbl_steps_status);
lblStepsStatus.Font = fontTip;
lblStepsStatus.ForeColor = 0xFF666666;
lblStepsStatus.Dock = System.Windows.Forms.DockStyle.Fill;

setStepsStatusText = function(){
    var statusName = tostring(steps.Status);
    var modeText = steps.MilestoneMode ? "Milestone" : "Normal";
    var currentTitle = steps.Items.get_Item(steps.Current).Title;
    var desc = stepDescriptions[steps.Current + 1] || "";

    lblStepsStatus.Text = "Current: " + tostring(steps.Current + 1)
        + " / " + tostring(steps.Items.Count)
        + "    Step: " + currentTitle
        + "    Status: " + statusName
        + "    Mode: " + modeText
        + "    Description: " + desc;
}

setStepsStatusText();

steps.ItemClick = function(sender,e){
    var item = e.get_Item();
    if(!item) return;

    // 不要用 sender.Items[i] 遍历 .NET 集合,容易索引混淆。
    // 这里使用 .NET 集合自身的 IndexOf。
    var index = sender.Items.IndexOf(item);
    if(index >= 0){
        sender.Current = index;
    }

    sender.Status = AntdUI.TStepState.Process;
    setStepsStatusText();
    showSuccess("Step clicked: " + item.Title);
}

// ---------- Steps 控制按钮 ----------
var btnPrev = AntdUI.Button(winform.custom_btn_prev);
btnPrev.Text = "Previous";
btnPrev.Font = fontNormal;
btnPrev.Dock = System.Windows.Forms.DockStyle.Fill;
btnPrev.Click = function(sender,e){
    if(steps.Current > 0){
        steps.Current--;
        steps.Status = AntdUI.TStepState.Process;
        setStepsStatusText();
        showSuccess("Previous step");
    }
}

var btnNext = AntdUI.Button(winform.custom_btn_next);
btnNext.Text = "Next";
btnNext.Font = fontNormal;
btnNext.Type = AntdUI.TTypeMini.Primary;
btnNext.Dock = System.Windows.Forms.DockStyle.Fill;
btnNext.Click = function(sender,e){
    if(steps.Current < steps.Items.Count - 1){
        steps.Current++;
        steps.Status = AntdUI.TStepState.Process;
        setStepsStatusText();
        showSuccess("Next step");
    }
    else {
        steps.Status = AntdUI.TStepState.Finish;
        setStepsStatusText();
        showSuccess("All steps finished");
    }
}

var btnError = AntdUI.Button(winform.custom_btn_error);
btnError.Text = "Set Error";
btnError.Font = fontNormal;
btnError.Type = AntdUI.TTypeMini.Error;
btnError.Dock = System.Windows.Forms.DockStyle.Fill;
btnError.Click = function(sender,e){
    steps.Status = AntdUI.TStepState.Error;
    setStepsStatusText();
    showSuccess("Current step status changed to Error");
}

var btnMilestone = AntdUI.Button(winform.custom_btn_milestone);
btnMilestone.Text = "Toggle Milestone";
btnMilestone.Font = fontNormal;
btnMilestone.Dock = System.Windows.Forms.DockStyle.Fill;
btnMilestone.Click = function(sender,e){
    steps.MilestoneMode = !steps.MilestoneMode;
    steps.MilestoneCurrentCompleted = steps.MilestoneMode;
    setStepsStatusText();
    showSuccess(steps.MilestoneMode ? "Milestone mode enabled" : "Normal steps mode");
}

// ---------- Timeline 时间轴 ----------
var timeline = AntdUI.Timeline(winform.custom_timeline);
timeline.Dock = System.Windows.Forms.DockStyle.Fill;
timeline.Font = fontNormal;
timeline.FontDescription = fontTip;
timeline.Gap = 18;

// 添加时间轴项目:TimelineItem(text, description)
var timeCreated = AntdUI.TimelineItem(
    "Project created",
    "2026-06-03 09:00  Create project and initialize repository"
);
timeCreated.Type = AntdUI.TTypeMini.Success;

var timeCommit = AntdUI.TimelineItem(
    "First commit",
    "2026-06-03 09:30  Add basic UI layout"
);
timeCommit.Type = AntdUI.TTypeMini.Primary;

var timeBuild = AntdUI.TimelineItem(
    "Build warning",
    "2026-06-03 10:00  Some optional resources are missing"
);
timeBuild.Type = AntdUI.TTypeMini.Warn;

var timeDeploy = AntdUI.TimelineItem(
    "Deploy failed",
    "2026-06-03 10:30  Remote server returned an error"
);
timeDeploy.Type = AntdUI.TTypeMini.Error;

var timeDone = AntdUI.TimelineItem(
    "Fixed and deployed",
    "2026-06-03 11:20  Fix configuration and deploy successfully"
);
timeDone.Type = AntdUI.TTypeMini.Success;
timeDone.Fill = 0xFF52C41A;
timeline.Items.Add(timeCreated);
timeline.Items.Add(timeCommit);
timeline.Items.Add(timeBuild);
timeline.Items.Add(timeDeploy);
timeline.Items.Add(timeDone);

timeline.ItemClick = function(sender,e){
    var item = e.get_Item();
    if(item){
        showSuccess("Timeline clicked: " + item.Text);
    }
}

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

下期预告:DatePicker日期选择器控件的创建

最新回复 (2)
  • 我高兴 19小时前
    0 2
    厉害
  • ccbwx 6小时前
    0 3
    快收集齐一套了,辛苦了
返回