{"slug":"densityswitcher","mode":"single","examples":[{"id":"densityswitcher-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">DensitySwitcher 密度切换</h2>\n  <p class=\"kole-desc\">宽松 / 默认 / 紧凑，影响表格、表单间距，可局部独立设置并保存。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-densw\" id=\"sw\">\n      <button class=\"kole-densw-opt\" data-v=\"loose\">宽松</button>\n      <button class=\"kole-densw-opt\" data-v=\"default\">默认</button>\n      <button class=\"kole-densw-opt\" data-v=\"compact\">紧凑</button>\n    </div>\n    <div class=\"kole-densw-demo default\" id=\"demo\">\n      <div class=\"kole-densw-row\">\n        <span>用户管理</span>\n        <span class=\"muted\">128 项</span>\n      </div>\n      <div class=\"kole-densw-row\">\n        <span>角色管理</span>\n        <span class=\"muted\">12 项</span>\n      </div>\n      <div class=\"kole-densw-row\">\n        <span>菜单管理</span>\n        <span class=\"muted\">36 项</span>\n      </div>\n    </div>\n  </div>\n</div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<h2>DensitySwitcher 密度切换</h2>\n<p>宽松 / 默认 / 紧凑，影响表格、表单间距，可局部独立设置并保存。</p>\n<div class=\"kole-densw\">\n  <button class=\"kole-densw-opt\">宽松</button>\n  <button class=\"kole-densw-opt\">默认</button>\n  <button class=\"kole-densw-opt\">紧凑</button>\n</div>\n<div class=\"kole-densw-demo default\">\n  <div class=\"kole-densw-row\">\n    <span>用户管理</span>\n    <span class=\"muted\">128 项</span>\n  </div>\n  <div class=\"kole-densw-row\">\n    <span>角色管理</span>\n    <span class=\"muted\">12 项</span>\n  </div>\n  <div class=\"kole-densw-row\">\n    <span>菜单管理</span>\n    <span class=\"muted\">36 项</span>\n  </div>\n</div>","jsx":"import { KoleDensitySwitcher } from 'kole-ui/react';\n\n<KoleDensitySwitcher options={options} modelValue={value} />","vue3":"<template>\n  <KoleDensitySwitcher :options=\"options\" v-model=\"value\" />\n</template>\n\n<script setup>\nimport { KoleDensitySwitcher } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleDensitySwitcher :options=\"options\" v-model=\"value\" />\n</template>\n\n<script>\nimport { KoleDensitySwitcher } from 'kole-ui/vue2';\nexport default { components: { KoleDensitySwitcher } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}