{
 "slug": "steplist",
 "mode": "single",
 "examples": [
  {
   "id": "steplist-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-demo-toolbar\">\n  <label>方向：</label>\n  <select id=\"dir\">\n    <option selected value=\"vertical\">垂直</option>\n    <option value=\"horizontal\">水平</option>\n  </select>\n</div>\n<div class=\"kole-demo-panel\">\n  <div class=\"kole-steplist\" id=\"app\" role=\"list\"></div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ],
     [
      1
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<label>方向：</label>\n<select>\n  <option selected value=\"vertical\">垂直</option>\n  <option value=\"horizontal\">水平</option>\n</select>\n<div class=\"kole-steplist\" role=\"list\"></div>",
    "jsx": "import { KoleStepList } from 'kole-ui/react';\n\nconst steps = [\n  { title: '创建项目', desc: '填写基础信息并创建。', status: 'done' },\n  { title: '配置成员', desc: '邀请协作成员并分配角色。', status: 'done' },\n  { title: '设置流程', desc: '定义审批与通知流程。', status: 'active' },\n  { title: '发布上线', desc: '提交审核后正式发布。', status: 'pending' },\n  { title: '历史回滚', desc: '上次发布校验失败。', status: 'error' }\n];\n\n<KoleStepList\n  steps={steps}\n  direction=\"vertical\"\n  clickable\n  onStepClick={(index) => console.log('点击：' + steps[index].title)}\n/>",
    "vue3": "<template>\n  <KoleStepList :steps=\"steps\" direction=\"vertical\" clickable @step-click=\"onStepClick\" />\n</template>\n\n<script setup>\nimport { KoleStepList } from 'kole-ui/vue3';\n\nconst steps = [\n  { title: '创建项目', desc: '填写基础信息并创建。', status: 'done' },\n  { title: '配置成员', desc: '邀请协作成员并分配角色。', status: 'done' },\n  { title: '设置流程', desc: '定义审批与通知流程。', status: 'active' },\n  { title: '发布上线', desc: '提交审核后正式发布。', status: 'pending' },\n  { title: '历史回滚', desc: '上次发布校验失败。', status: 'error' }\n];\n\nfunction onStepClick(index) {\n  console.log('点击：' + steps[index].title);\n}\n</script>",
    "vue2": "<template>\n  <KoleStepList :steps=\"steps\" direction=\"vertical\" clickable @step-click=\"onStepClick\" />\n</template>\n\n<script>\nimport { KoleStepList } from 'kole-ui/vue2';\n\nexport default {\n  name: 'StepListBasic',\n  components: { KoleStepList },\n  data() {\n    return {\n      steps: [\n        { title: '创建项目', desc: '填写基础信息并创建。', status: 'done' },\n        { title: '配置成员', desc: '邀请协作成员并分配角色。', status: 'done' },\n        { title: '设置流程', desc: '定义审批与通知流程。', status: 'active' },\n        { title: '发布上线', desc: '提交审核后正式发布。', status: 'pending' },\n        { title: '历史回滚', desc: '上次发布校验失败。', status: 'error' }\n      ]\n    };\n  },\n  methods: {\n    onStepClick(index) {\n      console.log('点击：' + this.steps[index].title);\n    }\n  }\n};\n</script>",
    "tsx": "import { KoleStepList } from 'kole-ui/react';\n\ntype StepStatus = 'done' | 'active' | 'pending' | 'error';\ntype StepDirection = 'vertical' | 'horizontal';\n\ninterface StepItem {\n  title: string;\n  desc: string;\n  status: StepStatus;\n}\n\nconst steps: ReadonlyArray<StepItem> = [\n  { title: '创建项目', desc: '填写基础信息并创建。', status: 'done' },\n  { title: '配置成员', desc: '邀请协作成员并分配角色。', status: 'done' },\n  { title: '设置流程', desc: '定义审批与通知流程。', status: 'active' },\n  { title: '发布上线', desc: '提交审核后正式发布。', status: 'pending' },\n  { title: '历史回滚', desc: '上次发布校验失败。', status: 'error' },\n];\n\nconst direction: StepDirection = 'vertical';\n\nfunction onStepClick(index: number): void {\n  console.log('点击：' + steps[index].title);\n}\n\n<KoleStepList steps={steps} direction={direction} clickable onStepClick={onStepClick} />",
    "vue3ts": "<template>\n  <KoleStepList :steps=\"steps\" :direction=\"direction\" clickable @step-click=\"onStepClick\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleStepList } from 'kole-ui/vue3';\n\ntype StepStatus = 'done' | 'active' | 'pending' | 'error';\ntype StepDirection = 'vertical' | 'horizontal';\n\ninterface StepItem {\n  title: string;\n  desc: string;\n  status: StepStatus;\n}\n\nconst steps: ReadonlyArray<StepItem> = [\n  { title: '创建项目', desc: '填写基础信息并创建。', status: 'done' },\n  { title: '配置成员', desc: '邀请协作成员并分配角色。', status: 'done' },\n  { title: '设置流程', desc: '定义审批与通知流程。', status: 'active' },\n  { title: '发布上线', desc: '提交审核后正式发布。', status: 'pending' },\n  { title: '历史回滚', desc: '上次发布校验失败。', status: 'error' },\n];\n\nconst direction: StepDirection = 'vertical';\n\nfunction onStepClick(index: number): void {\n  console.log('点击：' + steps[index].title);\n}\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleStepList :steps=\"steps\" :direction=\"direction\" clickable @step-click=\"onStepClick\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleStepList } from 'kole-ui/vue2';\n\ntype StepStatus = 'done' | 'active' | 'pending' | 'error';\ntype StepDirection = 'vertical' | 'horizontal';\n\ninterface StepItem {\n  title: string;\n  desc: string;\n  status: StepStatus;\n}\n\nexport default Vue.extend({\n  name: 'StepListBasic',\n  components: { KoleStepList },\n  data(): { steps: ReadonlyArray<StepItem>; direction: StepDirection } {\n    return {\n      steps: [\n        { title: '创建项目', desc: '填写基础信息并创建。', status: 'done' },\n        { title: '配置成员', desc: '邀请协作成员并分配角色。', status: 'done' },\n        { title: '设置流程', desc: '定义审批与通知流程。', status: 'active' },\n        { title: '发布上线', desc: '提交审核后正式发布。', status: 'pending' },\n        { title: '历史回滚', desc: '上次发布校验失败。', status: 'error' },\n      ],\n      direction: 'vertical',\n    };\n  },\n  methods: {\n    onStepClick(index: number): void {\n      console.log('点击：' + this.steps[index].title);\n    },\n  },\n});\n</script>"
   },
   "notes": "依据 frameworks/StepList.html:30-36 DATA 五步实参（done/done/active/pending/error）、:45-47 方向切换（vertical/horizontal）、:55-57 点击回调"
  }
 ],
 "curated": true
}