{
 "slug": "countdown",
 "mode": "single",
 "curated": true,
 "examples": [
  {
   "id": "countdown-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">Countdown 倒计时</h2>\n  <p class=\"kole-desc\">用于秒杀、验证码、会议开始等场景，支持天/时/分/秒，结束触发回调。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-demo__title\">距活动结束</div>\n    <div class=\"kole-countdown\" id=\"cd\" role=\"timer\" aria-live=\"polite\"></div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h2>Countdown 倒计时</h2>\n<p>用于秒杀、验证码、会议开始等场景，支持天/时/分/秒，结束触发回调。</p>\n<div>距活动结束</div>\n<div class=\"kole-countdown\" role=\"timer\" aria-live=\"polite\"></div>",
    "jsx": "import { useState } from 'react';\nimport { KoleCountdown } from 'kole-ui/react';\n\nexport default function Demo() {\n  const [target] = useState(() => Date.now() + 2 * 3600 * 1000 + 35 * 60 * 1000 + 12 * 1000);\n\n  return <KoleCountdown target={target} />;\n}",
    "vue3": "<template>\n  <KoleCountdown :target=\"target\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleCountdown } from 'kole-ui/vue3';\n\n// 目标时刻：2h35m12s（演示页 Countdown.html:22 的 var target）\nconst target = ref(Date.now() + 2 * 3600 * 1000 + 35 * 60 * 1000 + 12 * 1000);\n</script>",
    "vue2": "<template>\n  <KoleCountdown :target=\"target\" />\n</template>\n\n<script>\nimport { KoleCountdown } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleCountdown },\n  data() {\n    return { target: Date.now() + 2 * 3600 * 1000 + 35 * 60 * 1000 + 12 * 1000 };\n  },\n};\n</script>",
    "tsx": "import { KoleCountdown } from 'kole-ui/react';\n\nconst HOUR_MS: number = 3600 * 1000;\nconst MINUTE_MS: number = 60 * 1000;\nconst SECOND_MS: number = 1000;\n\n// 目标时刻：2h35m12s（演示页 Countdown.html:22 的 var target）\nfunction targetFromNow(): number {\n  return Date.now() + 2 * HOUR_MS + 35 * MINUTE_MS + 12 * SECOND_MS;\n}\n\nexport default function CountdownBasicDemo(): JSX.Element {\n  const target: number = targetFromNow();\n  return <KoleCountdown target={target} />;\n}",
    "vue3ts": "<template>\n  <KoleCountdown :target=\"target\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleCountdown } from 'kole-ui/vue3';\n\nconst HOUR_MS: number = 3600 * 1000;\nconst MINUTE_MS: number = 60 * 1000;\nconst SECOND_MS: number = 1000;\n\n// 目标时刻：2h35m12s（演示页 Countdown.html:22 的 var target）\nconst target: number = Date.now() + 2 * HOUR_MS + 35 * MINUTE_MS + 12 * SECOND_MS;\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleCountdown :target=\"target\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleCountdown } from 'kole-ui/vue2';\n\nconst HOUR_MS: number = 3600 * 1000;\nconst MINUTE_MS: number = 60 * 1000;\nconst SECOND_MS: number = 1000;\n\nexport default Vue.extend({\n  components: { KoleCountdown },\n  data(): { target: number } {\n    return { target: Date.now() + 2 * HOUR_MS + 35 * MINUTE_MS + 12 * SECOND_MS };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Countdown.html:22 的目标时刻（Date.now() + 2h35m12s）与 :37-39 的 seg/num/label 天时分秒结构；prop 取 frameworks/Countdown.jsx:6 的 target（毫秒时间戳），结束态文案见 Countdown.html:28「活动已结束」",
    "TS 形态依据 TS-VARIANTS.md：三端都用 `: number` 标注把 2h35m12s 拆成命名常量（target 见 Countdown.jsx 形参与 Countdown.vue3 defineProps）；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  }
 ]
}