264 lines
13 KiB
JSON
264 lines
13 KiB
JSON
{
|
||
"slug": "rate",
|
||
"curated": true,
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "rate-ex-1",
|
||
"title": "基础（点击评分）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-rate data-value=\"3\"></div>\n</div>",
|
||
"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": "<div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-value=\"3\"></div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleRate } from 'kole-ui/react';\n\nexport default function Demo() {\n const [score, setScore] = useState(3);\n return <KoleRate count={5} value={score} onChange={setScore} />;\n}",
|
||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst score = ref(3);\n</script>\n\n<template>\n <KoleRate :count=\"5\" v-model=\"score\" />\n</template>",
|
||
"vue2": "<template>\n <KoleRate :count=\"5\" v-model=\"score\" />\n</template>\n\n<script>\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRate },\n data() {\n return { score: 3 };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleRate } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [score, setScore] = useState<number>(3);\n return <KoleRate count={5} value={score} onChange={setScore} />;\n}",
|
||
"vue3ts": "<template>\n\n <KoleRate :count=\"5\" v-model=\"score\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst score = ref<number>(3);\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleRate :count=\"5\" v-model=\"score\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRate },\n data(): Record<string, unknown> {\n return { score: 3 };\n }\n};\n</script>"
|
||
},
|
||
"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": "<div class=\"demo-block\">\n <div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-half data-rate data-value=\"2.5\"></div>\n</div>",
|
||
"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": "<div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-value=\"2.5\"></div>",
|
||
"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 <KoleRate count={5} allowHalf value={score} onChange={setScore} />;\n}",
|
||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst score = ref(2.5);\n</script>\n\n<template>\n <KoleRate :count=\"5\" allow-half v-model=\"score\" />\n</template>",
|
||
"vue2": "<template>\n <KoleRate :count=\"5\" allow-half v-model=\"score\" />\n</template>\n\n<script>\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRate },\n data() {\n return { score: 2.5 };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleRate } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [score, setScore] = useState<number>(2.5);\n // allowHalf：点击星星左半为 0.5、右半为 1（Rate.jsx 第 41-44 行）\n return <KoleRate count={5} allowHalf value={score} onChange={setScore} />;\n}",
|
||
"vue3ts": "<template>\n\n <KoleRate :count=\"5\" allow-half v-model=\"score\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst score = ref<number>(2.5);\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleRate :count=\"5\" allow-half v-model=\"score\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRate },\n data(): Record<string, unknown> {\n return { score: 2.5 };\n }\n};\n</script>"
|
||
},
|
||
"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": "<div class=\"demo-block\">\n <div class=\"kole-rate is-readonly\" role=\"radiogroup\" data-count=\"5\" data-rate data-text data-value=\"4\"></div>\n</div>",
|
||
"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": "<div class=\"kole-rate is-readonly\" role=\"radiogroup\" data-count=\"5\" data-value=\"4\"></div>",
|
||
"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 <KoleRate count={5} value={4} readonly showText texts={texts} />;\n}",
|
||
"vue3": "<script setup>\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst texts = ['极差', '失望', '一般', '满意', '惊喜'];\n</script>\n\n<template>\n <KoleRate :count=\"5\" :model-value=\"4\" readonly show-text :texts=\"texts\" />\n</template>",
|
||
"vue2": "<template>\n <KoleRate :count=\"5\" :value=\"4\" readonly show-text :texts=\"texts\" />\n</template>\n\n<script>\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRate },\n data() {\n return { texts: ['极差', '失望', '一般', '满意', '惊喜'] };\n }\n};\n</script>",
|
||
"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 <KoleRate count={5} value={4} readonly showText texts={texts} />;\n}",
|
||
"vue3ts": "<template>\n\n <KoleRate :count=\"5\" :model-value=\"4\" readonly show-text :texts=\"texts\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('只读 + 显示文字');\nconst texts = ['极差', '失望', '一般', '满意', '惊喜'];\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleRate :count=\"5\" :value=\"4\" readonly show-text :texts=\"texts\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRate },\n data(): Record<string, unknown> {\n return { texts: ['极差', '失望', '一般', '满意', '惊喜'] };\n }\n};\n</script>"
|
||
},
|
||
"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": "<div class=\"demo-block\">\n <div class=\"kole-rate sm\" role=\"radiogroup\" data-count=\"5\" data-rate data-value=\"3\"></div>\n <div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-rate data-value=\"3\"></div>\n <div class=\"kole-rate lg\" role=\"radiogroup\" data-count=\"5\" data-rate data-value=\"3\"></div>\n</div>",
|
||
"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": "<div class=\"kole-rate sm\" role=\"radiogroup\" data-count=\"5\" data-value=\"3\"></div>\n<div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-value=\"3\"></div>\n<div class=\"kole-rate lg\" role=\"radiogroup\" data-count=\"5\" data-value=\"3\"></div>",
|
||
"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 <KoleRate size=\"sm\" count={5} defaultValue={3} />\n <KoleRate count={5} defaultValue={3} />\n <KoleRate size=\"lg\" count={5} defaultValue={3} />\n </>\n );\n}",
|
||
"vue3": "<script setup>\nimport { KoleRate } from 'kole-ui/vue3';\n</script>\n\n<template>\n <KoleRate size=\"sm\" :count=\"5\" :model-value=\"3\" />\n <KoleRate :count=\"5\" :model-value=\"3\" />\n <KoleRate size=\"lg\" :count=\"5\" :model-value=\"3\" />\n</template>",
|
||
"vue2": "<template>\n <div>\n <KoleRate size=\"sm\" :count=\"5\" :value=\"3\" />\n <KoleRate :count=\"5\" :value=\"3\" />\n <KoleRate size=\"lg\" :count=\"5\" :value=\"3\" />\n </div>\n</template>\n\n<script>\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRate }\n};\n</script>",
|
||
"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 <KoleRate size=\"sm\" count={5} defaultValue={3} />\n <KoleRate count={5} defaultValue={3} />\n <KoleRate size=\"lg\" count={5} defaultValue={3} />\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleRate size=\"sm\" :count=\"5\" :model-value=\"3\" />\n <KoleRate :count=\"5\" :model-value=\"3\" />\n <KoleRate size=\"lg\" :count=\"5\" :model-value=\"3\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('尺寸：small / default / large');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleRate size=\"sm\" :count=\"5\" :value=\"3\" />\n <KoleRate :count=\"5\" :value=\"3\" />\n <KoleRate size=\"lg\" :count=\"5\" :value=\"3\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRate },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"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。"
|
||
]
|
||
}
|
||
]
|
||
}
|