{ "slug": "steps", "mode": "scenarios", "examples": [ { "id": "steps-ex-1", "title": "横向步骤条", "titleSrc": "demo", "desc": "", "html": "
\n
\n
", "preview": { "show": [ [ 0, 2 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 3 ], [ 0, 2, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
", "jsx": "import { KoleSteps } from 'kole-ui/react';\n\nconst steps = [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n];\n\n", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleSteps } from 'kole-ui/react';\n\nexport default function KoleStepsDemo(): JSX.Element {\n const steps = [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n ];\n return (\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": "依据 frameworks/Steps.html:24 标记(data-current=\"1\" + horizontal)与 :34-39 STEPS 实参、:46 状态计算(i < current → finish)" }, { "id": "steps-ex-2", "title": "纵向步骤条(含异常状态)", "titleSrc": "demo", "desc": "", "html": "
\n
\n
", "preview": { "show": [ [ 0, 3 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 2 ], [ 0, 3, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
", "jsx": "import { KoleSteps } from 'kole-ui/react';\n\nconst steps = [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n];\n\n", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleSteps } from 'kole-ui/react';\n\nexport default function KoleStepsDemo(): JSX.Element {\n const steps = [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n ];\n return (\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": "依据 frameworks/Steps.html:29 标记(data-current=\"2\" + data-error=\"3\" + vertical)与 :47 异常态覆盖(i === errorAt → error)" } ], "curated": true }