aurora-admin/site/examples/inputnumber.json

{
 "slug": "inputnumber",
 "curated": true,
 "mode": "scenarios",
 "examples": [
  {
   "id": "inputnumber-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-inputnumber\">\n    <div class=\"kole-inputnumber-input-row\">\n      <button class=\"kole-inputnumber-action\" type=\"button\" aria-label=\"减少\" data-minus>−</button>\n      <input class=\"kole-inputnumber-control kole-inputnumber-number\" type=\"number\" aria-label=\"数量\" max=\"99\" min=\"0\" value=\"3\" />\n      <button class=\"kole-inputnumber-action\" type=\"button\" aria-label=\"增加\" data-plus>+</button>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-inputnumber\">\n  <div class=\"kole-inputnumber-input-row\">\n    <button class=\"kole-inputnumber-action\" type=\"button\" aria-label=\"减少\">−</button>\n    <input class=\"kole-inputnumber-control kole-inputnumber-number\" type=\"number\" aria-label=\"数量\" max=\"99\" min=\"0\" value=\"3\" />\n    <button class=\"kole-inputnumber-action\" type=\"button\" aria-label=\"增加\">+</button>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleInputNumber } from 'kole-ui/react';\n\nfunction Demo() {\n  const [qty, setQty] = useState(3);\n  return <KoleInputNumber value={qty} min={0} max={99} step={1} onChange={setQty} />;\n}",
    "vue3": "<template>\n  <KoleInputNumber v-model=\"qty\" :min=\"0\" :max=\"99\" :step=\"1\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleInputNumber } from 'kole-ui/vue3';\n\nconst qty = ref(3);\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleInputNumber v-model=\"qty\" :min=\"0\" :max=\"99\" :step=\"1\" />\n  </div>\n</template>\n\n<script>\nimport { KoleInputNumber } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInputNumber },\n  data() {\n    return { qty: 3 };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleInputNumber } from 'kole-ui/react';\n\nfunction Demo(): JSX.Element {\n  const [qty, setQty] = useState<number>(3);\n  return <KoleInputNumber value={qty} min={0} max={99} step={1} onChange={setQty} />;\n}\n\nexport default Demo;",
    "vue3ts": "<template>\n\n  <KoleInputNumber v-model=\"qty\" :min=\"0\" :max=\"99\" :step=\"1\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInputNumber } from 'kole-ui/vue3';\n\nconst qty = ref<number>(3);\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleInputNumber v-model=\"qty\" :min=\"0\" :max=\"99\" :step=\"1\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInputNumber } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInputNumber },\n  data(): Record<string, unknown> {\n    return { qty: 3 };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/InputNumber.html 默认示例的 input.kole-inputnumber-number[value=\"3\"][min=\"0\"][max=\"99\"] 与 data-minus/data-plus 两个 stepped 按钮（stepDown/stepUp，默认 step=1）"
   ]
  },
  {
   "id": "inputnumber-ex-2",
   "title": "状态与使用场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-inputnumber\">\n    <div class=\"kole-inputnumber-surface\" style=\"padding:12px\">输入数量、金额或排序权重，支持最小值、最大值、步长和精度。</div>\n    <span class=\"kole-inputnumber-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n  </div>\n  <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-inputnumber\">\n  <div class=\"kole-inputnumber-surface\" style=\"padding:12px\">输入数量、金额或排序权重，支持最小值、最大值、步长和精度。</div>\n  <span class=\"kole-inputnumber-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { useState } from 'react';\nimport { KoleInputNumber } from 'kole-ui/react';\n\nfunction Demo() {\n  const [price, setPrice] = useState(19.9);\n  return (\n    <>\n      <KoleInputNumber\n        value={price}\n        min={0}\n        max={9999}\n        step={0.1}\n        precision={2}\n        onChange={setPrice}\n      />\n      <KoleInputNumber value={5} min={1} max={10} step={1} disabled />\n    </>\n  );\n}",
    "vue3": "<template>\n  <KoleInputNumber v-model=\"price\" :min=\"0\" :max=\"9999\" :step=\"0.1\" :precision=\"2\" />\n  <KoleInputNumber :value=\"5\" :min=\"1\" :max=\"10\" :step=\"1\" disabled />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleInputNumber } from 'kole-ui/vue3';\n\nconst price = ref(19.9);\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleInputNumber v-model=\"price\" :min=\"0\" :max=\"9999\" :step=\"0.1\" :precision=\"2\" />\n    <KoleInputNumber :value=\"5\" :min=\"1\" :max=\"10\" :step=\"1\" disabled />\n  </div>\n</template>\n\n<script>\nimport { KoleInputNumber } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInputNumber },\n  data() {\n    return { price: 19.9 };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleInputNumber } from 'kole-ui/react';\n\nfunction Demo(): JSX.Element {\n  const [price, setPrice] = useState<number>(19.9);\n  return (\n    <>\n      <KoleInputNumber\n        value={price}\n        min={0}\n        max={9999}\n        step={0.1}\n        precision={2}\n        onChange={setPrice}\n      />\n      <KoleInputNumber value={5} min={1} max={10} step={1} disabled />\n    </>\n  );\n}\n\nexport default Demo;",
    "vue3ts": "<template>\n\n  <KoleInputNumber v-model=\"price\" :min=\"0\" :max=\"9999\" :step=\"0.1\" :precision=\"2\" />\n  <KoleInputNumber :value=\"5\" :min=\"1\" :max=\"10\" :step=\"1\" disabled />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInputNumber } from 'kole-ui/vue3';\n\nconst price = ref<number>(19.9);\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleInputNumber v-model=\"price\" :min=\"0\" :max=\"9999\" :step=\"0.1\" :precision=\"2\" />\n    <KoleInputNumber :value=\"5\" :min=\"1\" :max=\"10\" :step=\"1\" disabled />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInputNumber } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInputNumber },\n  data(): Record<string, unknown> {\n    return { price: 19.9 };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/InputNumber.html 「状态与使用场景」正文「支持最小值、最大值、步长和精度」+ frameworks/InputNumber.jsx 的 min/max/step/precision/disabled 参数表；金额场景用 step=0.1 + precision=2，禁用态用 disabled"
   ]
  }
 ]
}