{ "curated": true, "slug": "progressvariants", "mode": "scenarios", "examples": [ { "id": "progressvariants-ex-1", "title": "进度条变体 ProgressVariants 示例 1", "titleSrc": "", "desc": "", "html": "
\n
\n
\n
\n
\n
\n 完成\n
\n
\n
\n
\n
\n
\n
\n 60%\n
\n
\n
", "preview": { "show": [ [ 0 ] ], "hide": [ [ 1 ], [ 2 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
\n
\n
\n
\n
\n 完成\n
\n
\n
\n
\n
\n
\n
\n 60%\n
\n
", "jsx": "import { KoleProgressVariants } from 'kole-ui/react';\n\nexport default function Demo() {\n return (\n <>\n \n \n \n );\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleProgressVariants } from 'kole-ui/react';\n\ntype ProgressStatus = 'normal' | 'success' | 'warning' | 'error';\ninterface LineProgress {\n percent: number;\n status: ProgressStatus;\n}\n\nconst lines: ReadonlyArray = [\n { percent: 100, status: 'success' },\n { percent: 60, status: 'normal' },\n];\n\nexport default function ProgressLineDemo(): JSX.Element {\n return (\n <>\n {lines.map((line) => (\n \n ))}\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": "依据 frameworks/ProgressVariants.html:14-25 的两条线型(is-success + width:100% + 文案\"完成\"、默认态 + width:60% + 文案\"60%\");percent/status/showInfo/type 对齐 frameworks/ProgressVariants.jsx 的参数表,shape=line 取自 site/details/progressvariants.json contract.dims.shape" }, { "id": "progressvariants-ex-2", "title": "进度条变体 ProgressVariants 示例 2", "titleSrc": "", "desc": "", "html": "
\n
\n
\n
", "preview": { "show": [ [ 1 ] ], "hide": [ [ 0 ], [ 2 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
\n
\n
\n
", "jsx": "import { KoleProgressVariants } from 'kole-ui/react';\n\nexport default function Demo() {\n return (\n
\n \n \n
\n );\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleProgressVariants } from 'kole-ui/react';\n\ntype ProgressStatus = 'normal' | 'success' | 'warning' | 'error';\ninterface CircleProgress {\n percent: number;\n status: ProgressStatus;\n showInfo: boolean;\n}\n\nconst circles: ReadonlyArray = [\n { percent: 72, status: 'normal', showInfo: false },\n { percent: 88, status: 'success', showInfo: true },\n];\n\nexport default function ProgressCircleDemo(): JSX.Element {\n return (\n
\n {circles.map((circle) => (\n \n ))}\n
\n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": "依据 frameworks/ProgressVariants.html:29-30 的两个 kole-progress-circle 与 :44-45 的 circle(c1, 72, 'normal') / circle(c2, 88, 'success') 实参;type=circle、showInfo 对齐 frameworks/ProgressVariants.jsx 的参数表,shape=circle 取自 site/details/progressvariants.json contract.dims.shape" } ] }