{ "slug": "rate", "curated": true, "mode": "scenarios", "examples": [ { "id": "rate-ex-1", "title": "基础(点击评分)", "titleSrc": "demo", "desc": "", "html": "
\n
\n
", "preview": { "show": [ [ 0, 2 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 3 ], [ 0, 4 ], [ 0, 5 ], [ 0, 2, 0 ] ], "mode": "scenarios" }, "previewSafe": false, "previewUnsafeReasons": [ "演示脚本按可见尺寸测量布局" ], "source": "curated", "code": { "html": "
", "jsx": "import { useState } from 'react';\nimport { KoleRate } from 'kole-ui/react';\n\nexport default function Demo() {\n const [score, setScore] = useState(3);\n return ;\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KoleRate } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [score, setScore] = useState(3);\n return ;\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/Rate.html 第 24 行 data-count=\"5\" data-value=\"3\"(可点击评分,无 data-half / data-text / is-readonly)与第 71-88 行的点击取值逻辑(再次点击同一星清零)。", "prop 名见 frameworks/Rate.jsx 第 20-31 行参数表(value / count / allowHalf / readonly / size / showText / texts)与 frameworks/Rate.vue3.vue 第 17-26 行 defineProps(modelValue)。React 端受控值是 value,Vue3 端是 modelValue + v-model。" ] }, { "id": "rate-ex-2", "title": "允许半星", "titleSrc": "demo", "desc": "", "html": "
\n
\n
", "preview": { "show": [ [ 0, 3 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 2 ], [ 0, 4 ], [ 0, 5 ], [ 0, 3, 0 ] ], "mode": "scenarios" }, "previewSafe": false, "previewUnsafeReasons": [ "演示脚本按可见尺寸测量布局" ], "source": "curated", "code": { "html": "
", "jsx": "import { useState } from 'react';\nimport { KoleRate } from 'kole-ui/react';\n\nexport default function Demo() {\n const [score, setScore] = useState(2.5);\n // allowHalf:点击星星左半为 0.5、右半为 1(Rate.jsx 第 41-44 行)\n return ;\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KoleRate } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [score, setScore] = useState(2.5);\n // allowHalf:点击星星左半为 0.5、右半为 1(Rate.jsx 第 41-44 行)\n return ;\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/Rate.html 第 29 行 data-count=\"5\" data-value=\"2.5\" data-half:data-half 由第 48 行 root.hasAttribute(\"data-half\") 读出为 allowHalf,半星值 2.5 落在第 55-60 行的宽度比例上。", "allowHalf 见 frameworks/Rate.jsx 第 24 行参数表与 frameworks/Rate.vue3.vue 第 20 行 defineProps;Vue 模板写 allow-half。" ] }, { "id": "rate-ex-3", "title": "只读 + 显示文字", "titleSrc": "demo", "desc": "", "html": "
\n
\n
", "preview": { "show": [ [ 0, 4 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 2 ], [ 0, 3 ], [ 0, 5 ], [ 0, 4, 0 ] ], "mode": "scenarios" }, "previewSafe": false, "previewUnsafeReasons": [ "演示脚本按可见尺寸测量布局" ], "source": "curated", "code": { "html": "
", "jsx": "import { KoleRate } from 'kole-ui/react';\n\nconst texts = ['极差', '失望', '一般', '满意', '惊喜'];\n\nexport default function Demo() {\n // readonly + showText:文字取 texts[Math.ceil(4) - 1] = 「满意」(Rate.jsx 第 36 行)\n return ;\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleRate } from 'kole-ui/react';\n\nconst texts = ['极差', '失望', '一般', '满意', '惊喜'];\n\nexport default function Demo(): JSX.Element {\n // readonly + showText:文字取 texts[Math.ceil(4) - 1] = 「满意」(Rate.jsx 第 36 行)\n return ;\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/Rate.html 第 34 行 class 含 is-readonly、data-count=\"5\" data-value=\"4\" data-text:第 49 行 data-text 读出为 showText,第 50 行 texts = [\"极差\",\"失望\",\"一般\",\"满意\",\"惊喜\"],第 66 行取 texts[Math.ceil(4) - 1] = 「满意」。", "readonly / showText / texts 见 frameworks/Rate.jsx 第 26-29 行参数表与 frameworks/Rate.vue3.vue 第 21-25 行 defineProps;Vue2 端受控 prop 名是 value(Rate.vue2.vue 第 18 行)。" ] }, { "id": "rate-ex-4", "title": "尺寸:small / default / large", "titleSrc": "demo", "desc": "", "html": "
\n
\n
\n
\n
", "preview": { "show": [ [ 0, 5 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 2 ], [ 0, 3 ], [ 0, 4 ], [ 0, 5, 0 ] ], "mode": "scenarios" }, "previewSafe": false, "previewUnsafeReasons": [ "演示脚本按可见尺寸测量布局" ], "source": "curated", "code": { "html": "
\n
\n
", "jsx": "import { KoleRate } from 'kole-ui/react';\n\nexport default function Demo() {\n // size 三档:sm(14px)/ default(20px)/ lg(28px),见 frameworks/Rate.css 第 12-15 行\n return (\n <>\n \n \n \n \n );\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleRate } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n // size 三档:sm(14px)/ default(20px)/ lg(28px),见 frameworks/Rate.css 第 12-15 行\n return (\n <>\n \n \n \n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/Rate.html 第 39-41 行的三个 .kole-rate:类为 sm / 无 / lg,三者均 data-count=\"5\" data-value=\"3\";三档字号见 frameworks/Rate.css 第 12-15 行(.sm 14px、默认 20px、.lg 28px)。", "prop 名为 size,取值 default | sm | lg(frameworks/Rate.jsx 第 27 行、Rate.vue3.vue 第 23 行),size 不等于 default 时才追加类(Rate.jsx 第 52 行);React 端非受控初值用 defaultValue(Rate.jsx 第 22 行)。Vue2 模板只允许一个根元素,三档并排故外包一层无属性 div。" ] } ] }