iter(g165): 步骤条支持竖向排列

This commit is contained in:
HIsheR
2026-10-26 16:11:06 +08:00
parent dddbccd97d
commit 804ab3b18f
7 changed files with 64 additions and 7 deletions
+7 -1
View File
@@ -582,13 +582,19 @@ const content = h(
section(
'sec-stepper',
'步骤条',
'stepper:done/current/upcoming 三态随 active 信号流转,clickable 时点已完成步骤回跳。',
'stepper:done/current/upcoming 三态随 active 信号流转,clickable 时点已完成步骤回跳;direction=vertical 走竖排。',
stepper({
steps: [{ label: '确认订单', description: '收货信息与商品清单' }, { label: '支付', description: '选择支付方式' }, { label: '完成', description: '等待发货' }],
active: stepIdx,
clickable: true,
onChange: (i) => toast.info(`回到第 ${i + 1} 步`),
}),
divider({ dashed: true }),
stepper({ // 竖向:侧栏 / 移动端场景,连接线落在圆点下方
steps: [{ label: '提交申请', description: '10-20 09:12 已提交' }, { label: '资料初审', description: '10-21 14:03 初审通过' }, { label: '终审', description: '等待风控终审' }],
active: signal(2), // 独立信号:演示停在第三步
direction: 'vertical',
}),
h(
'div',
{ class: 'row' },