110 lines
7.8 KiB
JSON
110 lines
7.8 KiB
JSON
{
|
|
"slug": "switch",
|
|
"mode": "scenarios",
|
|
"examples": [
|
|
{
|
|
"id": "switch-ex-1",
|
|
"title": "默认与常用变体",
|
|
"titleSrc": "demo",
|
|
"desc": "",
|
|
"html": "<div class=\"demo-block\">\n <div class=\"row kole-switch\">\n <button class=\"kole-switch-switch is-on\" type=\"button\" role=\"switch\" aria-label=\"启用通知\" aria-checked=\"true\" data-toggle></button>\n <span>启用通知</span>\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-switch\">\n <button class=\"kole-switch-switch is-on\" type=\"button\" role=\"switch\" aria-label=\"启用通知\" aria-checked=\"true\"></button>\n <span>启用通知</span>\n</div>",
|
|
"jsx": "import { useState } from 'react';\nimport { KoleSwitch } from 'kole-ui/react';\n\nexport default function NotifySwitch() {\n const [notify, setNotify] = useState(true);\n return <KoleSwitch checked={notify} onChange={setNotify} />;\n}",
|
|
"vue3": "<template>\n <KoleSwitch :checked=\"notify\" @change=\"notify = $event\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleSwitch } from 'kole-ui/vue3';\n\nconst notify = ref(true);\n</script>",
|
|
"vue2": "<template>\n <KoleSwitch :checked=\"notify\" @change=\"notify = $event\" />\n</template>\n\n<script>\nimport { KoleSwitch } from 'kole-ui/vue2';\n\nexport default {\n name: 'SwitchNotifyDemo',\n components: { KoleSwitch },\n data() {\n return { notify: true };\n }\n};\n</script>",
|
|
"tsx": "import { useState } from 'react';\nimport { KoleSwitch } from 'kole-ui/react';\n\ntype SwitchSize = 'large' | 'default' | 'small';\n\nexport default function NotifySwitch(): JSX.Element {\n const [notify, setNotify] = useState<boolean>(true);\n const size: SwitchSize = 'default';\n\n return <KoleSwitch checked={notify} size={size} onChange={setNotify} />;\n}",
|
|
"vue3ts": "<template>\n <KoleSwitch :checked=\"notify\" size=\"default\" @change=\"notify = $event\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleSwitch } from 'kole-ui/vue3';\n\ntype SwitchSize = 'large' | 'default' | 'small';\n\nconst size: SwitchSize = 'default';\nconst notify = ref<boolean>(true);\n</script>",
|
|
"vue2ts": "<template>\n <div>\n <KoleSwitch :checked=\"notify\" size=\"default\" @change=\"notify = $event\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSwitch } from 'kole-ui/vue2';\n\ntype SwitchSize = 'large' | 'default' | 'small';\n\nexport default Vue.extend({\n name: 'SwitchNotifyDemo',\n components: { KoleSwitch },\n data(): { size: SwitchSize; notify: boolean } {\n return { size: 'default', notify: true };\n },\n});\n</script>"
|
|
},
|
|
"notes": "依据 frameworks/Switch.html:6 内联脚本（aria-checked / is-on 点击切换，默认开启）与 Switch.jsx:4 的 checked 默认值"
|
|
},
|
|
{
|
|
"id": "switch-ex-2",
|
|
"title": "状态与使用场景",
|
|
"titleSrc": "demo",
|
|
"desc": "",
|
|
"html": "<div class=\"demo-block\">\n <div class=\"row kole-switch\">\n <div class=\"kole-switch-surface\" style=\"padding:12px\">即时启停配置项或业务状态，例如启用通知、公开数据和自动同步。</div>\n <span class=\"kole-switch-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-switch\">\n <div class=\"kole-switch-surface\" style=\"padding:12px\">即时启停配置项或业务状态，例如启用通知、公开数据和自动同步。</div>\n <span class=\"kole-switch-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
|
|
"jsx": "import { KoleSwitch } from 'kole-ui/react';\n\n<div className=\"kole-switch-surface\">\n <KoleSwitch checked={false} disabled size=\"default\" />\n <span className=\"kole-switch-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>",
|
|
"vue3": "<template>\n <div class=\"kole-switch-surface\">\n <KoleSwitch :checked=\"false\" disabled size=\"default\" />\n <span class=\"kole-switch-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n </div>\n</template>\n\n<script setup>\nimport { KoleSwitch } from 'kole-ui/vue3';\n</script>",
|
|
"vue2": "<template>\n <div class=\"kole-switch-surface\">\n <KoleSwitch :checked=\"false\" disabled size=\"default\" />\n <span class=\"kole-switch-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n </div>\n</template>\n\n<script>\nimport { KoleSwitch } from 'kole-ui/vue2';\n\nexport default {\n name: 'SwitchSurfaceDemo',\n components: { KoleSwitch }\n};\n</script>",
|
|
"tsx": "import { KoleSwitch } from 'kole-ui/react';\n\ntype SwitchSize = 'large' | 'default' | 'small';\n\ninterface SurfaceState {\n checked: boolean;\n disabled: boolean;\n size: SwitchSize;\n hint: string;\n}\n\nconst state: SurfaceState = {\n checked: false,\n disabled: true,\n size: 'default',\n hint: '支持键盘焦点、状态反馈和令牌化样式。',\n};\n\nexport default function SwitchSurfaceDemo(): JSX.Element {\n return (\n <div className=\"kole-switch-surface\">\n <KoleSwitch checked={state.checked} disabled={state.disabled} size={state.size} />\n <span className=\"kole-switch-desc\">{state.hint}</span>\n </div>\n );\n}",
|
|
"vue3ts": "<template>\n <div class=\"kole-switch-surface\">\n <KoleSwitch :checked=\"state.checked\" :disabled=\"state.disabled\" :size=\"state.size\" />\n <span class=\"kole-switch-desc\">{{ state.hint }}</span>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSwitch } from 'kole-ui/vue3';\n\ntype SwitchSize = 'large' | 'default' | 'small';\n\ninterface SurfaceState {\n checked: boolean;\n disabled: boolean;\n size: SwitchSize;\n hint: string;\n}\n\nconst state: SurfaceState = {\n checked: false,\n disabled: true,\n size: 'default',\n hint: '支持键盘焦点、状态反馈和令牌化样式。',\n};\n</script>",
|
|
"vue2ts": "<template>\n <div class=\"kole-switch-surface\">\n <KoleSwitch :checked=\"state.checked\" :disabled=\"state.disabled\" :size=\"state.size\" />\n <span class=\"kole-switch-desc\">{{ state.hint }}</span>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSwitch } from 'kole-ui/vue2';\n\ntype SwitchSize = 'large' | 'default' | 'small';\n\ninterface SurfaceState {\n checked: boolean;\n disabled: boolean;\n size: SwitchSize;\n hint: string;\n}\n\nexport default Vue.extend({\n name: 'SwitchSurfaceDemo',\n components: { KoleSwitch },\n data(): { state: SurfaceState } {\n return {\n state: {\n checked: false,\n disabled: true,\n size: 'default',\n hint: '支持键盘焦点、状态反馈和令牌化样式。',\n },\n };\n },\n});\n</script>"
|
|
},
|
|
"notes": "依据 frameworks/Switch.html:6 第二块标记（kole-switch-surface 面板 + kole-switch-desc 说明文案）与 Switch.jsx:4 的 disabled / size"
|
|
}
|
|
],
|
|
"curated": true
|
|
}
|