{
 "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"
  }
 ]
}