{
 "slug": "collapse",
 "mode": "scenarios",
 "curated": true,
 "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": "curated",
   "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\nconst items = [\n  { key: 'basic', title: '基本设置' },\n  { key: 'notify', title: '通知设置' },\n  { key: 'security', title: '安全设置' },\n  { key: 'advanced', title: '高级（无权限）', disabled: true }\n];\n\nconst panels = {\n  basic: '系统名称、主题色、默认语言等基础配置。',\n  notify: '邮件、短信、站内信通知开关。',\n  security: '登录保护、密码策略、IP 白名单。'\n};\n\nfunction renderPanel(key) {\n  return panels[key];\n}\n\n<KoleCollapse items={items} accordion defaultValue=\"basic\" renderPanel={renderPanel} />",
    "vue3": "<template>\n  <KoleCollapse v-model=\"active\" :items=\"items\" accordion>\n    <template #basic>系统名称、主题色、默认语言等基础配置。</template>\n    <template #notify>邮件、短信、站内信通知开关。</template>\n    <template #security>登录保护、密码策略、IP 白名单。</template>\n  </KoleCollapse>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue3';\n\nconst items = [\n  { key: 'basic', title: '基本设置' },\n  { key: 'notify', title: '通知设置' },\n  { key: 'security', title: '安全设置' },\n  { key: 'advanced', title: '高级（无权限）', disabled: true }\n];\nconst active = ref('basic');\n</script>",
    "vue2": "<template>\n  <KoleCollapse v-model=\"active\" :items=\"items\" accordion>\n    <template #basic>系统名称、主题色、默认语言等基础配置。</template>\n    <template #notify>邮件、短信、站内信通知开关。</template>\n    <template #security>登录保护、密码策略、IP 白名单。</template>\n  </KoleCollapse>\n</template>\n\n<script>\nimport { KoleCollapse } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleCollapse },\n  data() {\n    return {\n      items: [\n        { key: 'basic', title: '基本设置' },\n        { key: 'notify', title: '通知设置' },\n        { key: 'security', title: '安全设置' },\n        { key: 'advanced', title: '高级（无权限）', disabled: true }\n      ],\n      active: 'basic'\n    };\n  }\n};\n</script>",
    "tsx": "import { KoleCollapse } from 'kole-ui/react';\n\ninterface CollapseItem {\n  key: string;\n  title: string;\n  disabled?: boolean;\n}\n\nconst items: ReadonlyArray<CollapseItem> = [\n  { key: 'basic', title: '基本设置' },\n  { key: 'notify', title: '通知设置' },\n  { key: 'security', title: '安全设置' },\n  { key: 'advanced', title: '高级（无权限）', disabled: true },\n];\n\ntype PanelKey = 'basic' | 'notify' | 'security';\nconst panels: Record<PanelKey, string> = {\n  basic: '系统名称、主题色、默认语言等基础配置。',\n  notify: '邮件、短信、站内信通知开关。',\n  security: '登录保护、密码策略、IP 白名单。',\n};\n\nfunction renderPanel(key: string): string | undefined {\n  return key in panels ? panels[key as PanelKey] : undefined;\n}\n\n<KoleCollapse items={items} accordion defaultValue=\"basic\" renderPanel={renderPanel} />",
    "vue3ts": "<template>\n  <KoleCollapse v-model=\"active\" :items=\"items\" accordion>\n    <template #basic>系统名称、主题色、默认语言等基础配置。</template>\n    <template #notify>邮件、短信、站内信通知开关。</template>\n    <template #security>登录保护、密码策略、IP 白名单。</template>\n  </KoleCollapse>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue3';\n\ninterface CollapseItem {\n  key: string;\n  title: string;\n  disabled?: boolean;\n}\n\nconst items: ReadonlyArray<CollapseItem> = [\n  { key: 'basic', title: '基本设置' },\n  { key: 'notify', title: '通知设置' },\n  { key: 'security', title: '安全设置' },\n  { key: 'advanced', title: '高级（无权限）', disabled: true },\n];\nconst active = ref<string>('basic');\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleCollapse v-model=\"active\" :items=\"items\" accordion>\n      <template #basic>系统名称、主题色、默认语言等基础配置。</template>\n      <template #notify>邮件、短信、站内信通知开关。</template>\n      <template #security>登录保护、密码策略、IP 白名单。</template>\n    </KoleCollapse>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue2';\n\ninterface CollapseItem {\n  key: string;\n  title: string;\n  disabled?: boolean;\n}\n\nexport default Vue.extend({\n  components: { KoleCollapse },\n  data(): { items: ReadonlyArray<CollapseItem>; active: string } {\n    return {\n      items: [\n        { key: 'basic', title: '基本设置' },\n        { key: 'notify', title: '通知设置' },\n        { key: 'security', title: '安全设置' },\n        { key: 'advanced', title: '高级（无权限）', disabled: true },\n      ],\n      active: 'basic',\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Collapse.html:24-41 的 data-accordion 块四项（基本设置 is-open / 通知设置 / 安全设置 / 高级（无权限）is-disabled）；prop 名取自 frameworks/Collapse.jsx:15-22（items/accordion/defaultValue/renderPanel）",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 interface CollapseItem + Record<PanelKey, string> 收口 renderPanel 的取值域；vue3ts/vue2ts 用 <script lang=\"ts\"> + ref<string>()；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  },
  {
   "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": "curated",
   "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\nconst items = [\n  { key: 'orders', title: '订单管理' },\n  { key: 'refunds', title: '退款管理' }\n];\n\nconst panels = {\n  orders: '查看与处理所有订单。',\n  refunds: '退款审核与到账记录。'\n};\n\nfunction renderPanel(key) {\n  return panels[key];\n}\n\n<KoleCollapse items={items} value={['orders', 'refunds']} renderPanel={renderPanel} />",
    "vue3": "<template>\n  <KoleCollapse v-model=\"openKeys\" :items=\"items\">\n    <template #orders>查看与处理所有订单。</template>\n    <template #refunds>退款审核与到账记录。</template>\n  </KoleCollapse>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue3';\n\nconst items = [\n  { key: 'orders', title: '订单管理' },\n  { key: 'refunds', title: '退款管理' }\n];\nconst openKeys = ref(['orders', 'refunds']);\n</script>",
    "vue2": "<template>\n  <KoleCollapse v-model=\"openKeys\" :items=\"items\">\n    <template #orders>查看与处理所有订单。</template>\n    <template #refunds>退款审核与到账记录。</template>\n  </KoleCollapse>\n</template>\n\n<script>\nimport { KoleCollapse } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleCollapse },\n  data() {\n    return {\n      items: [\n        { key: 'orders', title: '订单管理' },\n        { key: 'refunds', title: '退款管理' }\n      ],\n      openKeys: ['orders', 'refunds']\n    };\n  }\n};\n</script>",
    "tsx": "import { KoleCollapse } from 'kole-ui/react';\n\ninterface CollapseItem {\n  key: string;\n  title: string;\n}\n\nconst items: ReadonlyArray<CollapseItem> = [\n  { key: 'orders', title: '订单管理' },\n  { key: 'refunds', title: '退款管理' },\n];\n\ntype PanelKey = 'orders' | 'refunds';\nconst panels: Record<PanelKey, string> = {\n  orders: '查看与处理所有订单。',\n  refunds: '退款审核与到账记录。',\n};\n\nfunction renderPanel(key: string): string | undefined {\n  return key in panels ? panels[key as PanelKey] : undefined;\n}\n\nconst openKeys: ReadonlyArray<PanelKey> = ['orders', 'refunds'];\n\n<KoleCollapse items={items} value={openKeys} renderPanel={renderPanel} />",
    "vue3ts": "<template>\n  <KoleCollapse v-model=\"openKeys\" :items=\"items\">\n    <template #orders>查看与处理所有订单。</template>\n    <template #refunds>退款审核与到账记录。</template>\n  </KoleCollapse>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue3';\n\ninterface CollapseItem {\n  key: string;\n  title: string;\n}\n\nconst items: ReadonlyArray<CollapseItem> = [\n  { key: 'orders', title: '订单管理' },\n  { key: 'refunds', title: '退款管理' },\n];\n\ntype PanelKey = 'orders' | 'refunds';\nconst openKeys = ref<PanelKey[]>(['orders', 'refunds']);\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleCollapse v-model=\"openKeys\" :items=\"items\">\n      <template #orders>查看与处理所有订单。</template>\n      <template #refunds>退款审核与到账记录。</template>\n    </KoleCollapse>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue2';\n\ninterface CollapseItem {\n  key: string;\n  title: string;\n}\n\ntype PanelKey = 'orders' | 'refunds';\n\nexport default Vue.extend({\n  components: { KoleCollapse },\n  data(): { items: ReadonlyArray<CollapseItem>; openKeys: PanelKey[] } {\n    return {\n      items: [\n        { key: 'orders', title: '订单管理' },\n        { key: 'refunds', title: '退款管理' },\n      ],\n      openKeys: ['orders', 'refunds'],\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Collapse.html:46-55 非手风琴块两项（订单管理、退款管理均 is-open），无 data-accordion 即可同时展开；value 为展开 key 数组（Collapse.jsx:19）"
   ]
  }
 ]
}