{"slug":"collapse","mode":"scenarios","examples":[{"id":"collapse-ex-1","title":"手风琴模式（同时仅展开一个）","titleSrc":"demo","desc":"","html":"<div class=\"demo-block\">\n  <div class=\"kole-collapse\" data-accordion>\n    <div class=\"kole-collapse-item is-open\">\n      <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n        <span class=\"kole-collapse-arrow\">▶</span>\n        <span class=\"kole-collapse-title\">基本设置</span>\n      </div>\n      <div class=\"kole-collapse-content\">系统名称、主题色、默认语言等基础配置。</div>\n    </div>\n    <div class=\"kole-collapse-item\">\n      <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n        <span class=\"kole-collapse-arrow\">▶</span>\n        <span class=\"kole-collapse-title\">通知设置</span>\n      </div>\n      <div class=\"kole-collapse-content\" hidden>邮件、短信、站内信通知开关。</div>\n    </div>\n    <div class=\"kole-collapse-item\">\n      <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n        <span class=\"kole-collapse-arrow\">▶</span>\n        <span class=\"kole-collapse-title\">安全设置</span>\n      </div>\n      <div class=\"kole-collapse-content\" hidden>登录保护、密码策略、IP 白名单。</div>\n    </div>\n    <div class=\"kole-collapse-item is-disabled\">\n      <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n        <span class=\"kole-collapse-arrow\">▶</span>\n        <span class=\"kole-collapse-title\">高级（无权限）</span>\n      </div>\n      <div class=\"kole-collapse-content\" hidden>仅管理员可见的高级选项。</div>\n    </div>\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":"api-derived","code":{"html":"<div class=\"kole-collapse\" data-accordion>\n  <div class=\"kole-collapse-item is-open\">\n    <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n      <span class=\"kole-collapse-arrow\">▶</span>\n      <span class=\"kole-collapse-title\">基本设置</span>\n    </div>\n    <div class=\"kole-collapse-content\">系统名称、主题色、默认语言等基础配置。</div>\n  </div>\n  <div class=\"kole-collapse-item\">\n    <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n      <span class=\"kole-collapse-arrow\">▶</span>\n      <span class=\"kole-collapse-title\">通知设置</span>\n    </div>\n    <div class=\"kole-collapse-content\" hidden>邮件、短信、站内信通知开关。</div>\n  </div>\n  <div class=\"kole-collapse-item\">\n    <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n      <span class=\"kole-collapse-arrow\">▶</span>\n      <span class=\"kole-collapse-title\">安全设置</span>\n    </div>\n    <div class=\"kole-collapse-content\" hidden>登录保护、密码策略、IP 白名单。</div>\n  </div>\n  <div class=\"kole-collapse-item is-disabled\">\n    <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n      <span class=\"kole-collapse-arrow\">▶</span>\n      <span class=\"kole-collapse-title\">高级（无权限）</span>\n    </div>\n    <div class=\"kole-collapse-content\" hidden>仅管理员可见的高级选项。</div>\n  </div>\n</div>","jsx":"import { KoleCollapse } from 'kole-ui/react';\n\n<KoleCollapse />","vue3":"<template>\n  <KoleCollapse />\n</template>\n\n<script setup>\nimport { KoleCollapse } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleCollapse />\n</template>\n\n<script>\nimport { KoleCollapse } from 'kole-ui/vue2';\nexport default { components: { KoleCollapse } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"id":"collapse-ex-2","title":"非手风琴（可同时展开多个）","titleSrc":"demo","desc":"","html":"<div class=\"demo-block\">\n  <div class=\"kole-collapse\">\n    <div class=\"kole-collapse-item is-open\">\n      <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n        <span class=\"kole-collapse-arrow\">▶</span>\n        <span class=\"kole-collapse-title\">订单管理</span>\n      </div>\n      <div class=\"kole-collapse-content\">查看与处理所有订单。</div>\n    </div>\n    <div class=\"kole-collapse-item is-open\">\n      <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n        <span class=\"kole-collapse-arrow\">▶</span>\n        <span class=\"kole-collapse-title\">退款管理</span>\n      </div>\n      <div class=\"kole-collapse-content\">退款审核与到账记录。</div>\n    </div>\n  </div>\n</div>","preview":{"show":[[0,3]],"hide":[[1],[0,0],[0,1],[0,2],[0,3,0]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<div class=\"kole-collapse\">\n  <div class=\"kole-collapse-item is-open\">\n    <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n      <span class=\"kole-collapse-arrow\">▶</span>\n      <span class=\"kole-collapse-title\">订单管理</span>\n    </div>\n    <div class=\"kole-collapse-content\">查看与处理所有订单。</div>\n  </div>\n  <div class=\"kole-collapse-item is-open\">\n    <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n      <span class=\"kole-collapse-arrow\">▶</span>\n      <span class=\"kole-collapse-title\">退款管理</span>\n    </div>\n    <div class=\"kole-collapse-content\">退款审核与到账记录。</div>\n  </div>\n</div>","jsx":"import { KoleCollapse } from 'kole-ui/react';\n\n<KoleCollapse />","vue3":"<template>\n  <KoleCollapse />\n</template>\n\n<script setup>\nimport { KoleCollapse } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleCollapse />\n</template>\n\n<script>\nimport { KoleCollapse } from 'kole-ui/vue2';\nexport default { components: { KoleCollapse } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}