{"slug":"radiocard","mode":"single","examples":[{"id":"radiocard-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"kole-radiocard-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-radiocard-grid\" role=\"radio\" tabindex=\"0\" style=\"grid-template-columns:repeat(3,1fr)\"></div>","jsx":"import { useState } from 'react';\nimport { KoleRadioCard } from 'kole-ui/react';\n\nconst options = [\n  { label: '基础版', value: 'basic', desc: '适合个人与小团队，包含核心功能。', icon: '🟢' },\n  { label: '专业版', value: 'pro', desc: '进阶报表与权限管理，适合成长型企业。', icon: '🔵' },\n  { label: '旗舰版', value: 'max', desc: '全功能 + 专属支持，适合大型组织。', icon: '🟣' }\n  ];\n\nexport default function Demo() {\n  const [value, setValue] = useState('pro');\n  return <KoleRadioCard options={options} modelValue={value} onChange={setValue} />;\n}","vue3":"<script setup>\nimport { ref } from 'vue';\nimport { KoleRadioCard } from 'kole-ui/vue3';\n\nconst options = [\n  { label: '基础版', value: 'basic', desc: '适合个人与小团队，包含核心功能。', icon: '🟢' },\n  { label: '专业版', value: 'pro', desc: '进阶报表与权限管理，适合成长型企业。', icon: '🔵' },\n  { label: '旗舰版', value: 'max', desc: '全功能 + 专属支持，适合大型组织。', icon: '🟣' }\n  ];\nconst value = ref('pro');\n</script>\n\n<template>\n  <KoleRadioCard :options=\"options\" v-model=\"value\" />\n</template>","vue2":"<script setup>\nimport { ref } from 'vue';\nimport { KoleRadioCard } from 'kole-ui/vue2';\n\nconst options = [\n  { label: '基础版', value: 'basic', desc: '适合个人与小团队，包含核心功能。', icon: '🟢' },\n  { label: '专业版', value: 'pro', desc: '进阶报表与权限管理，适合成长型企业。', icon: '🔵' },\n  { label: '旗舰版', value: 'max', desc: '全功能 + 专属支持，适合大型组织。', icon: '🟣' }\n  ];\nconst value = ref('pro');\n</script>\n\n<template>\n  <KoleRadioCard :options=\"options\" v-model=\"value\" />\n</template>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性"]}]}