117 lines
9.0 KiB
JSON
117 lines
9.0 KiB
JSON
{
|
||
"slug": "radio",
|
||
"curated": true,
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "radio-ex-1",
|
||
"title": "默认与常用变体",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-radio\">\n <label class=\"kole-radio-option\">\n <input type=\"radio\" checked name=\"kole-radio-demo\" value=\"a\" />\n 选项 A\n </label>\n <label class=\"kole-radio-option\">\n <input type=\"radio\" name=\"kole-radio-demo\" value=\"b\" />\n 选项 B\n </label>\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-radio\">\n <label class=\"kole-radio-option\">\n <input type=\"radio\" checked name=\"kole-radio-demo\" value=\"a\" />\n 选项 A\n </label>\n <label class=\"kole-radio-option\">\n <input type=\"radio\" name=\"kole-radio-demo\" value=\"b\" />\n 选项 B\n </label>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleRadio } from 'kole-ui/react';\n\nconst options = [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' }\n];\n\nexport default function Demo() {\n const [value, setValue] = useState('a');\n return <KoleRadio options={options} modelValue={value} onChange={setValue} />;\n}",
|
||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleRadio } from 'kole-ui/vue3';\n\nconst options = [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' }\n];\nconst value = ref('a');\n</script>\n\n<template>\n <KoleRadio :options=\"options\" v-model=\"value\" />\n</template>",
|
||
"vue2": "<template>\n <KoleRadio :options=\"options\" :model-value=\"value\" @input=\"value = $event\" />\n</template>\n\n<script>\nimport { KoleRadio } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRadio },\n data() {\n return {\n value: 'a',\n options: [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleRadio } from 'kole-ui/react';\n\ninterface RadioOption {\n label: string;\n value: string;\n}\n\nconst options: ReadonlyArray<RadioOption> = [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' },\n];\n\nexport default function RadioDefaultDemo(): JSX.Element {\n const [value, setValue] = useState<string>('a');\n return <KoleRadio options={options} modelValue={value} onChange={setValue} />;\n}",
|
||
"vue3ts": "<template>\n <KoleRadio :options=\"options\" v-model=\"value\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleRadio } from 'kole-ui/vue3';\n\ninterface RadioOption {\n label: string;\n value: string;\n}\n\nconst options: ReadonlyArray<RadioOption> = [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' },\n];\nconst value = ref<string>('a');\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleRadio :options=\"options\" :model-value=\"value\" @input=\"value = $event\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRadio } from 'kole-ui/vue2';\n\ninterface RadioOption {\n label: string;\n value: string;\n}\n\nexport default Vue.extend({\n components: { KoleRadio },\n data(): { value: string; options: ReadonlyArray<RadioOption> } {\n return {\n value: 'a',\n options: [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Radio.html 第 5 行 body 第 1 个 .demo-block：name=\"kole-radio-demo\" 的两个 .kole-radio-option，value=\"a\" 上带 checked、value=\"b\" 不带 —— 即 options 两项、modelValue 初始 \"a\"。",
|
||
"prop 名见 frameworks/Radio.jsx 第 4 行参数表（modelValue / options / disabled）与 frameworks/Radio.vue3.vue 第 7-11 行 defineProps。Vue2 端（frameworks/Radio.vue2.vue 第 8-12、15 行）prop 名同为 modelValue，但只 emit input，故 Vue2 写 :model-value + @input 显式回写，不用 v-model。",
|
||
"TS 形态依据 TS-VARIANTS.md：tsx 用 useState<string> + interface RadioOption；vue3ts/vue2ts 用 <script lang=\"ts\"> + ref<string>；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
|
||
]
|
||
},
|
||
{
|
||
"id": "radio-ex-2",
|
||
"title": "状态与使用场景",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-radio\">\n <div class=\"kole-radio-surface\" style=\"padding:12px\">在互斥选项中选择一个结果，例如审批结论、显示模式或筛选维度。</div>\n <span class=\"kole-radio-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-radio\">\n <div class=\"kole-radio-surface\" style=\"padding:12px\">在互斥选项中选择一个结果，例如审批结论、显示模式或筛选维度。</div>\n <span class=\"kole-radio-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
|
||
"jsx": "import { KoleRadio } from 'kole-ui/react';\n\nconst options = [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' }\n];\n\n// 禁用态：整组不可交互（Radio.jsx 的 disabled prop，输入框带 disabled）\nexport default function Demo() {\n return <KoleRadio options={options} modelValue=\"b\" disabled />;\n}",
|
||
"vue3": "<script setup>\nimport { KoleRadio } from 'kole-ui/vue3';\n\nconst options = [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' }\n];\n</script>\n\n<template>\n <!-- 禁用态：整组不可交互（disabled prop） -->\n <KoleRadio :options=\"options\" model-value=\"b\" disabled />\n</template>",
|
||
"vue2": "<template>\n <KoleRadio :options=\"options\" model-value=\"b\" disabled />\n</template>\n\n<script>\nimport { KoleRadio } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRadio },\n data() {\n return {\n options: [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { KoleRadio } from 'kole-ui/react';\n\ninterface RadioOption {\n label: string;\n value: string;\n}\n\nconst options: ReadonlyArray<RadioOption> = [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' },\n];\n\nconst selected: string = 'b';\n\n// 禁用态：整组不可交互（Radio.jsx 的 disabled prop，输入框带 disabled）\nexport default function RadioDisabledDemo(): JSX.Element {\n return <KoleRadio options={options} modelValue={selected} disabled />;\n}",
|
||
"vue3ts": "<template>\n <!-- 禁用态：整组不可交互（disabled prop） -->\n <KoleRadio :options=\"options\" model-value=\"b\" disabled />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRadio } from 'kole-ui/vue3';\n\ninterface RadioOption {\n label: string;\n value: string;\n}\n\nconst options: ReadonlyArray<RadioOption> = [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' },\n];\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleRadio :options=\"options\" model-value=\"b\" disabled />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRadio } from 'kole-ui/vue2';\n\ninterface RadioOption {\n label: string;\n value: string;\n}\n\nexport default Vue.extend({\n components: { KoleRadio },\n data(): { options: ReadonlyArray<RadioOption> } {\n return {\n options: [\n { label: '选项 A', value: 'a' },\n { label: '选项 B', value: 'b' },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Radio.html 第 5 行 body 第 2 个 .demo-block「状态与使用场景」：块内只有 .kole-radio-surface 说明文案与 .kole-radio-desc，没有可映射的控件标记；该组件的 API 表（site/details/radio.json contract.dims 为空，frameworks/Radio.jsx 第 4 行参数表）在 options / modelValue 之外只剩 disabled 一个可用 prop。",
|
||
"因此本示例给出 disabled 禁用态调用：整组输入框带 disabled（Radio.jsx 第 8 行），并与示例 1 的受控写法区分。"
|
||
]
|
||
}
|
||
]
|
||
}
|