{"slug":"checkboxcard","mode":"single","examples":[{"id":"checkboxcard-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"kole-checkcard-grid\" id=\"app\" role=\"radio\" tabindex=\"0\" style=\"grid-template-columns:repeat(3,1fr)\"></div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"demo-data","code":{"html":"<div class=\"kole-checkcard-grid\" role=\"radio\" tabindex=\"0\" style=\"grid-template-columns:repeat(3,1fr)\"></div>","jsx":"import { useState } from 'react';\nimport { KoleCheckboxCard } from 'kole-ui/react';\n\nconst options = [\n  { label: '数据分析', value: 'analytics', desc: '多维度报表与漏斗分析。', icon: '📊' },\n  { label: '消息推送', value: 'push', desc: '全渠道触达与定时发送。', icon: '🔔' },\n  { label: '权限管理', value: 'rbac', desc: '角色与数据权限配置。', icon: '🔐' }\n  ];\n\nexport default function Demo() {\n  const [value, setValue] = useState(['analytics']);\n  return <KoleCheckboxCard options={options} modelValue={value} onChange={setValue} />;\n}","vue3":"<script setup>\nimport { ref } from 'vue';\nimport { KoleCheckboxCard } from 'kole-ui/vue3';\n\nconst options = [\n  { label: '数据分析', value: 'analytics', desc: '多维度报表与漏斗分析。', icon: '📊' },\n  { label: '消息推送', value: 'push', desc: '全渠道触达与定时发送。', icon: '🔔' },\n  { label: '权限管理', value: 'rbac', desc: '角色与数据权限配置。', icon: '🔐' }\n  ];\nconst value = ref(['analytics']);\n</script>\n\n<template>\n  <KoleCheckboxCard :options=\"options\" v-model=\"value\" />\n</template>","vue2":"<script setup>\nimport { ref } from 'vue';\nimport { KoleCheckboxCard } from 'kole-ui/vue2';\n\nconst options = [\n  { label: '数据分析', value: 'analytics', desc: '多维度报表与漏斗分析。', icon: '📊' },\n  { label: '消息推送', value: 'push', desc: '全渠道触达与定时发送。', icon: '🔔' },\n  { label: '权限管理', value: 'rbac', desc: '角色与数据权限配置。', icon: '🔐' }\n  ];\nconst value = ref(['analytics']);\n</script>\n\n<template>\n  <KoleCheckboxCard :options=\"options\" v-model=\"value\" />\n</template>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性"]}]}