{ "slug": "timelinelist", "curated": true, "mode": "single", "examples": [ { "id": "timelinelist-ex-1", "title": "基础用法", "titleSrc": "", "desc": "", "html": "
\n \n \n
\n
\n
\n
", "preview": { "show": [ [ 0 ], [ 1 ] ], "hide": [], "mode": "single" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "\n\n
", "jsx": "import { useState } from 'react';\nimport { KoleTimelineList } from 'kole-ui/react';\n\nconst ITEMS = [\n { time: '09:00', title: '提交申请', desc: '张三提交了采购单 PR-2024-001。', status: 'done' },\n { time: '10:30', title: '主管审批', desc: '李主管已通过审批。', status: 'done' },\n { time: '14:00', title: '财务复核', desc: '财务正在复核预算。', status: 'active' },\n { time: '—', title: '入库登记', desc: '等待复核完成后登记。', status: 'pending' },\n { time: '—', title: '归档', desc: '复核不通过,已退回。', status: 'error' }\n];\n\nfunction ApprovalTimeline() {\n const [direction, setDirection] = useState('vertical');\n const handleDirection = (event) => setDirection(event.target.value);\n return (\n <>\n \n \n \n );\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KoleTimelineList } from 'kole-ui/react';\n\nconst ITEMS = [\n { time: '09:00', title: '提交申请', desc: '张三提交了采购单 PR-2024-001。', status: 'done' },\n { time: '10:30', title: '主管审批', desc: '李主管已通过审批。', status: 'done' },\n { time: '14:00', title: '财务复核', desc: '财务正在复核预算。', status: 'active' },\n { time: '—', title: '入库登记', desc: '等待复核完成后登记。', status: 'pending' },\n { time: '—', title: '归档', desc: '复核不通过,已退回。', status: 'error' }\n];\n\nfunction ApprovalTimeline(): JSX.Element {\n const [direction, setDirection] = useState('vertical');\n const handleDirection = (event) => setDirection(event.target.value);\n return (\n <>\n \n \n \n );\n}\n\nexport default ApprovalTimeline;", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/TimelineList.html 第 31-37 行的 DATA(time / title / desc / status 五条,status 取 done|active|pending|error)与第 40 行取 #dir 的 vertical|horizontal,items 与 direction 两个 prop 名见 frameworks/TimelineList.jsx 第 4 行参数表、vue3 defineProps 第 16 行。", "节点状态类名 is-done / is-active / is-pending / is-error 在 frameworks/TimelineList.css 中真实存在,因此 status 直接沿用演示页取值。" ] } ] }