80 lines
10 KiB
JSON
80 lines
10 KiB
JSON
{
|
|
"curated": true,
|
|
"slug": "progressvariants",
|
|
"mode": "scenarios",
|
|
"examples": [
|
|
{
|
|
"id": "progressvariants-ex-1",
|
|
"title": "进度条变体 ProgressVariants 示例 1",
|
|
"titleSrc": "",
|
|
"desc": "",
|
|
"html": "<div class=\"kole-card\">\n <div class=\"kole-progress is-success\" role=\"progressbar\" style=\"margin-bottom:12px\">\n <div class=\"kole-progress-line-wrap\">\n <div class=\"kole-progress-line\">\n <div class=\"kole-progress-line-fill\" style=\"width:100%\"></div>\n </div>\n <span class=\"kole-progress-text\">完成</span>\n </div>\n </div>\n <div class=\"kole-progress\" role=\"progressbar\">\n <div class=\"kole-progress-line-wrap\">\n <div class=\"kole-progress-line\">\n <div class=\"kole-progress-line-fill\" style=\"width:60%\"></div>\n </div>\n <span class=\"kole-progress-text\">60%</span>\n </div>\n </div>\n</div>",
|
|
"preview": {
|
|
"show": [
|
|
[
|
|
0
|
|
]
|
|
],
|
|
"hide": [
|
|
[
|
|
1
|
|
],
|
|
[
|
|
2
|
|
]
|
|
],
|
|
"mode": "scenarios"
|
|
},
|
|
"previewSafe": true,
|
|
"previewUnsafeReasons": [],
|
|
"source": "curated",
|
|
"code": {
|
|
"html": "<div class=\"kole-progress is-success\" role=\"progressbar\" style=\"margin-bottom:12px\">\n <div class=\"kole-progress-line-wrap\">\n <div class=\"kole-progress-line\">\n <div class=\"kole-progress-line-fill\" style=\"width:100%\"></div>\n </div>\n <span class=\"kole-progress-text\">完成</span>\n </div>\n</div>\n<div class=\"kole-progress\" role=\"progressbar\">\n <div class=\"kole-progress-line-wrap\">\n <div class=\"kole-progress-line\">\n <div class=\"kole-progress-line-fill\" style=\"width:60%\"></div>\n </div>\n <span class=\"kole-progress-text\">60%</span>\n </div>\n</div>",
|
|
"jsx": "import { KoleProgressVariants } from 'kole-ui/react';\n\nexport default function Demo() {\n return (\n <>\n <KoleProgressVariants type=\"line\" percent={100} status=\"success\" showInfo role=\"progressbar\" />\n <KoleProgressVariants type=\"line\" percent={60} status=\"normal\" showInfo role=\"progressbar\" />\n </>\n );\n}",
|
|
"vue3": "<template>\n <KoleProgressVariants type=\"line\" :percent=\"100\" status=\"success\" :show-info=\"true\" role=\"progressbar\" />\n <KoleProgressVariants type=\"line\" :percent=\"60\" status=\"normal\" :show-info=\"true\" role=\"progressbar\" />\n</template>\n\n<script setup>\nimport { KoleProgressVariants } from 'kole-ui/vue3';\n</script>",
|
|
"vue2": "<template>\n <div>\n <KoleProgressVariants type=\"line\" :percent=\"100\" status=\"success\" :show-info=\"true\" role=\"progressbar\" />\n <KoleProgressVariants type=\"line\" :percent=\"60\" status=\"normal\" :show-info=\"true\" role=\"progressbar\" />\n </div>\n</template>\n\n<script>\nimport { KoleProgressVariants } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleProgressVariants }\n};\n</script>",
|
|
"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<LineProgress> = [\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 <KoleProgressVariants\n key={line.status}\n type=\"line\"\n percent={line.percent}\n status={line.status}\n showInfo\n role=\"progressbar\"\n />\n ))}\n </>\n );\n}",
|
|
"vue3ts": "<template>\n <KoleProgressVariants\n v-for=\"line in lines\"\n :key=\"line.status\"\n type=\"line\"\n :percent=\"line.percent\"\n :status=\"line.status\"\n :show-info=\"true\"\n role=\"progressbar\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleProgressVariants } from 'kole-ui/vue3';\n\ntype ProgressStatus = 'normal' | 'success' | 'warning' | 'error';\ninterface LineProgress {\n percent: number;\n status: ProgressStatus;\n}\n\nconst lines: ReadonlyArray<LineProgress> = [\n { percent: 100, status: 'success' },\n { percent: 60, status: 'normal' },\n];\n</script>",
|
|
"vue2ts": "<template>\n <div>\n <KoleProgressVariants\n v-for=\"line in lines\"\n :key=\"line.status\"\n type=\"line\"\n :percent=\"line.percent\"\n :status=\"line.status\"\n :show-info=\"true\"\n role=\"progressbar\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleProgressVariants } from 'kole-ui/vue2';\n\ntype ProgressStatus = 'normal' | 'success' | 'warning' | 'error';\ninterface LineProgress {\n percent: number;\n status: ProgressStatus;\n}\n\nexport default Vue.extend({\n components: { KoleProgressVariants },\n data(): { lines: ReadonlyArray<LineProgress> } {\n return {\n lines: [\n { percent: 100, status: 'success' },\n { percent: 60, status: 'normal' },\n ],\n };\n },\n});\n</script>"
|
|
},
|
|
"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": "<div class=\"kole-card\" style=\"display:flex;gap:24px;align-items:center\">\n <div class=\"kole-progress-circle\" id=\"c1\" role=\"progressbar\"></div>\n <div class=\"kole-progress-circle\" id=\"c2\" role=\"progressbar\"></div>\n</div>",
|
|
"preview": {
|
|
"show": [
|
|
[
|
|
1
|
|
]
|
|
],
|
|
"hide": [
|
|
[
|
|
0
|
|
],
|
|
[
|
|
2
|
|
]
|
|
],
|
|
"mode": "scenarios"
|
|
},
|
|
"previewSafe": true,
|
|
"previewUnsafeReasons": [],
|
|
"source": "curated",
|
|
"code": {
|
|
"html": "<div style=\"display:flex;gap:24px;align-items:center\">\n <div class=\"kole-progress-circle\" role=\"progressbar\"></div>\n <div class=\"kole-progress-circle\" role=\"progressbar\"></div>\n</div>",
|
|
"jsx": "import { KoleProgressVariants } from 'kole-ui/react';\n\nexport default function Demo() {\n return (\n <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>\n <KoleProgressVariants type=\"circle\" percent={72} status=\"normal\" showInfo={false} role=\"progressbar\" />\n <KoleProgressVariants type=\"circle\" percent={88} status=\"success\" showInfo role=\"progressbar\" />\n </div>\n );\n}",
|
|
"vue3": "<template>\n <div style=\"display:flex;gap:24px;align-items:center\">\n <KoleProgressVariants type=\"circle\" :percent=\"72\" status=\"normal\" :show-info=\"false\" role=\"progressbar\" />\n <KoleProgressVariants type=\"circle\" :percent=\"88\" status=\"success\" :show-info=\"true\" role=\"progressbar\" />\n </div>\n</template>\n\n<script setup>\nimport { KoleProgressVariants } from 'kole-ui/vue3';\n</script>",
|
|
"vue2": "<template>\n <div style=\"display:flex;gap:24px;align-items:center\">\n <KoleProgressVariants type=\"circle\" :percent=\"72\" status=\"normal\" :show-info=\"false\" role=\"progressbar\" />\n <KoleProgressVariants type=\"circle\" :percent=\"88\" status=\"success\" :show-info=\"true\" role=\"progressbar\" />\n </div>\n</template>\n\n<script>\nimport { KoleProgressVariants } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleProgressVariants }\n};\n</script>",
|
|
"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<CircleProgress> = [\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 <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>\n {circles.map((circle) => (\n <KoleProgressVariants\n key={circle.status}\n type=\"circle\"\n percent={circle.percent}\n status={circle.status}\n showInfo={circle.showInfo}\n role=\"progressbar\"\n />\n ))}\n </div>\n );\n}",
|
|
"vue3ts": "<template>\n <div style=\"display:flex;gap:24px;align-items:center\">\n <KoleProgressVariants\n v-for=\"circle in circles\"\n :key=\"circle.status\"\n type=\"circle\"\n :percent=\"circle.percent\"\n :status=\"circle.status\"\n :show-info=\"circle.showInfo\"\n role=\"progressbar\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleProgressVariants } from 'kole-ui/vue3';\n\ntype ProgressStatus = 'normal' | 'success' | 'warning' | 'error';\ninterface CircleProgress {\n percent: number;\n status: ProgressStatus;\n showInfo: boolean;\n}\n\nconst circles: ReadonlyArray<CircleProgress> = [\n { percent: 72, status: 'normal', showInfo: false },\n { percent: 88, status: 'success', showInfo: true },\n];\n</script>",
|
|
"vue2ts": "<template>\n <div style=\"display:flex;gap:24px;align-items:center\">\n <KoleProgressVariants\n v-for=\"circle in circles\"\n :key=\"circle.status\"\n type=\"circle\"\n :percent=\"circle.percent\"\n :status=\"circle.status\"\n :show-info=\"circle.showInfo\"\n role=\"progressbar\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleProgressVariants } from 'kole-ui/vue2';\n\ntype ProgressStatus = 'normal' | 'success' | 'warning' | 'error';\ninterface CircleProgress {\n percent: number;\n status: ProgressStatus;\n showInfo: boolean;\n}\n\nexport default Vue.extend({\n components: { KoleProgressVariants },\n data(): { circles: ReadonlyArray<CircleProgress> } {\n return {\n circles: [\n { percent: 72, status: 'normal', showInfo: false },\n { percent: 88, status: 'success', showInfo: true },\n ],\n };\n },\n});\n</script>"
|
|
},
|
|
"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"
|
|
}
|
|
]
|
|
}
|