{"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":"demo-mapped","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\n<>\n<KoleProgressVariants status=\"success\" role=\"progressbar\">完成</KoleProgressVariants>\n<KoleProgressVariants role=\"progressbar\">60%</KoleProgressVariants>\n</>","vue3":"import { KoleProgressVariants } from 'kole-ui/vue3';\n\n<template>\n<KoleProgressVariants status=\"success\" role=\"progressbar\">完成</KoleProgressVariants>\n<KoleProgressVariants role=\"progressbar\">60%</KoleProgressVariants>\n</template>","vue2":"import { KoleProgressVariants } from 'kole-ui/vue2';\n\n<template>\n<KoleProgressVariants status=\"success\" role=\"progressbar\">完成</KoleProgressVariants>\n<KoleProgressVariants role=\"progressbar\">60%</KoleProgressVariants>\n</template>"},"notes":[]},{"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":"api-derived","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\n<KoleProgressVariants />","vue3":"<template>\n  <KoleProgressVariants />\n</template>\n\n<script setup>\nimport { KoleProgressVariants } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleProgressVariants />\n</template>\n\n<script>\nimport { KoleProgressVariants } from 'kole-ui/vue2';\nexport default { components: { KoleProgressVariants } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}