{
 "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
}