40 lines
6.7 KiB
JSON
40 lines
6.7 KiB
JSON
{
|
|
"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
|
|
}
|