110 lines
7.8 KiB
JSON
110 lines
7.8 KiB
JSON
{
|
||
"slug": "steps",
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "steps-ex-1",
|
||
"title": "横向步骤条",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"kole-steps horizontal\" role=\"list\" data-current=\"1\" data-steps></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-steps horizontal\" role=\"list\" data-current=\"1\" data-steps></div>",
|
||
"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<KoleSteps steps={steps} current={1} direction=\"horizontal\" />",
|
||
"vue3": "<template>\n <KoleSteps :steps=\"steps\" :current=\"1\" direction=\"horizontal\" />\n</template>\n\n<script setup>\nimport { KoleSteps } from 'kole-ui/vue3';\n\nconst steps = [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n];\n</script>",
|
||
"vue2": "<template>\n <KoleSteps :steps=\"steps\" :current=\"1\" direction=\"horizontal\" />\n</template>\n\n<script>\nimport { KoleSteps } from 'kole-ui/vue2';\n\nexport default {\n name: 'StepsHorizontal',\n components: { KoleSteps },\n data() {\n return {\n steps: [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n ]\n };\n }\n};\n</script>",
|
||
"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 <KoleSteps steps={steps} current={1} direction=\"horizontal\" />\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleSteps :steps=\"steps\" :current=\"1\" direction=\"horizontal\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSteps } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('横向步骤条');\nconst steps = [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n];\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleSteps :steps=\"steps\" :current=\"1\" direction=\"horizontal\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSteps } from 'kole-ui/vue2';\n\nexport default {\n name: 'StepsHorizontal',\n components: { KoleSteps },\n data(): Record<string, unknown> {\n return {\n steps: [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n ]\n };\n }\n};\n</script>"
|
||
},
|
||
"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": "<div class=\"demo-block\">\n <div class=\"kole-steps vertical\" role=\"list\" data-current=\"2\" data-error=\"3\" data-steps></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-steps vertical\" role=\"list\" data-current=\"2\" data-steps></div>",
|
||
"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<KoleSteps steps={steps} current={2} errorAt={3} direction=\"vertical\" />",
|
||
"vue3": "<template>\n <KoleSteps :steps=\"steps\" :current=\"2\" :error-at=\"3\" direction=\"vertical\" />\n</template>\n\n<script setup>\nimport { KoleSteps } from 'kole-ui/vue3';\n\nconst steps = [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n];\n</script>",
|
||
"vue2": "<template>\n <KoleSteps :steps=\"steps\" :current=\"2\" :error-at=\"3\" direction=\"vertical\" />\n</template>\n\n<script>\nimport { KoleSteps } from 'kole-ui/vue2';\n\nexport default {\n name: 'StepsVerticalError',\n components: { KoleSteps },\n data() {\n return {\n steps: [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n ]\n };\n }\n};\n</script>",
|
||
"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 <KoleSteps steps={steps} current={2} errorAt={3} direction=\"vertical\" />\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleSteps :steps=\"steps\" :current=\"2\" :error-at=\"3\" direction=\"vertical\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSteps } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('纵向步骤条（含异常状态）');\nconst steps = [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n];\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleSteps :steps=\"steps\" :current=\"2\" :error-at=\"3\" direction=\"vertical\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSteps } from 'kole-ui/vue2';\n\nexport default {\n name: 'StepsVerticalError',\n components: { KoleSteps },\n data(): Record<string, unknown> {\n return {\n steps: [\n { title: '填写订单', desc: '录入客户与商品信息' },\n { title: '审核', desc: '主管确认订单合规' },\n { title: '付款', desc: '完成支付流程' },\n { title: '完成', desc: '生成发货单' }\n ]\n };\n }\n};\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/Steps.html:29 标记（data-current=\"2\" + data-error=\"3\" + vertical）与 :47 异常态覆盖（i === errorAt → error）"
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|