{
 "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
}