{"slug":"switchgroup","mode":"single","examples":[{"id":"switchgroup-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"kole-panel\">\n  <div class=\"kole-switchgroup\" id=\"app\" role=\"group\"></div>\n</div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"demo-data","code":{"html":"<div class=\"kole-switchgroup\" role=\"group\"></div>","jsx":"import { useState } from 'react';\nimport { KoleSwitchGroup } from 'kole-ui/react';\n\nconst options = [\n  { label: '邮件通知', value: 'mail', desc: '接收系统邮件提醒', on: true },\n  { label: '短信通知', value: 'sms', desc: '重要变更发送短信', on: false },\n  { label: '站内信', value: 'inbox', desc: '工作台消息中心', on: true }\n  ];\n\nexport default function Demo() {\n  const [value, setValue] = useState(null);\n  return <KoleSwitchGroup options={options} modelValue={value} onChange={setValue} />;\n}","vue3":"<script setup>\nimport { ref } from 'vue';\nimport { KoleSwitchGroup } from 'kole-ui/vue3';\n\nconst options = [\n  { label: '邮件通知', value: 'mail', desc: '接收系统邮件提醒', on: true },\n  { label: '短信通知', value: 'sms', desc: '重要变更发送短信', on: false },\n  { label: '站内信', value: 'inbox', desc: '工作台消息中心', on: true }\n  ];\nconst value = ref(null);\n</script>\n\n<template>\n  <KoleSwitchGroup :options=\"options\" v-model=\"value\" />\n</template>","vue2":"<script setup>\nimport { ref } from 'vue';\nimport { KoleSwitchGroup } from 'kole-ui/vue2';\n\nconst options = [\n  { label: '邮件通知', value: 'mail', desc: '接收系统邮件提醒', on: true },\n  { label: '短信通知', value: 'sms', desc: '重要变更发送短信', on: false },\n  { label: '站内信', value: 'inbox', desc: '工作台消息中心', on: true }\n  ];\nconst value = ref(null);\n</script>\n\n<template>\n  <KoleSwitchGroup :options=\"options\" v-model=\"value\" />\n</template>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性"]}]}