{
 "slug": "sidemenu",
 "curated": true,
 "mode": "scenarios",
 "examples": [
  {
   "id": "sidemenu-ex-1",
   "title": "默认态（选中：全部订单）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <nav class=\"kole-menu\" id=\"menu-default\" role=\"navigation\" aria-label=\"主菜单\"></nav>\n</div>",
   "preview": {
    "show": [
     [
      1
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ],
     [
      5
     ],
     [
      6
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"主菜单\"></nav>",
    "jsx": "import { useState } from 'react';\nimport { KoleSideMenu } from 'kole-ui/react';\n\nconst ITEMS = [\n  { key: 'home', label: '工作台', icon: '⊞' },\n  { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n    { key: 'order-all', label: '全部订单' },\n    { key: 'order-ship', label: '待发货' },\n    { key: 'order-refund', label: '退款' }\n  ] },\n  { key: 'goods', label: '商品', icon: '◇', children: [\n    { key: 'goods-list', label: '商品列表' },\n    { key: 'goods-cat', label: '分类管理' }\n  ] },\n  { key: 'data', label: '数据', icon: '▤' },\n  { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nfunction OrderSideMenu() {\n  const [activeKey, setActiveKey] = useState('order-all');\n  return <KoleSideMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSideMenu } from 'kole-ui/vue3';\n\nconst ITEMS = [\n  { key: 'home', label: '工作台', icon: '⊞' },\n  { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n    { key: 'order-all', label: '全部订单' },\n    { key: 'order-ship', label: '待发货' },\n    { key: 'order-refund', label: '退款' }\n  ] },\n  { key: 'goods', label: '商品', icon: '◇', children: [\n    { key: 'goods-list', label: '商品列表' },\n    { key: 'goods-cat', label: '分类管理' }\n  ] },\n  { key: 'data', label: '数据', icon: '▤' },\n  { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\nconst active = ref('order-all');\n</script>\n\n<template>\n  <KoleSideMenu :items=\"ITEMS\" v-model:active-key=\"active\" />\n</template>",
    "vue2": "<template>\n  <KoleSideMenu :items=\"ITEMS\" :active-key=\"active\" @change=\"active = $event\" />\n</template>\n\n<script>\nimport { KoleSideMenu } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSideMenu },\n  data() {\n    return {\n      active: 'order-all',\n      ITEMS: [\n        { key: 'home', label: '工作台', icon: '⊞' },\n        { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n          { key: 'order-all', label: '全部订单' },\n          { key: 'order-ship', label: '待发货' },\n          { key: 'order-refund', label: '退款' }\n        ] },\n        { key: 'goods', label: '商品', icon: '◇', children: [\n          { key: 'goods-list', label: '商品列表' },\n          { key: 'goods-cat', label: '分类管理' }\n        ] },\n        { key: 'data', label: '数据', icon: '▤' },\n        { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleSideMenu } from 'kole-ui/react';\n\nconst ITEMS = [\n  { key: 'home', label: '工作台', icon: '⊞' },\n  { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n    { key: 'order-all', label: '全部订单' },\n    { key: 'order-ship', label: '待发货' },\n    { key: 'order-refund', label: '退款' }\n  ] },\n  { key: 'goods', label: '商品', icon: '◇', children: [\n    { key: 'goods-list', label: '商品列表' },\n    { key: 'goods-cat', label: '分类管理' }\n  ] },\n  { key: 'data', label: '数据', icon: '▤' },\n  { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nfunction OrderSideMenu(): JSX.Element {\n  const [activeKey, setActiveKey] = useState<string>('order-all');\n  return <KoleSideMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}\n\nexport default OrderSideMenu;",
    "vue3ts": "<template>\n\n  <KoleSideMenu :items=\"ITEMS\" v-model:active-key=\"active\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSideMenu } from 'kole-ui/vue3';\n\nconst ITEMS = [\n  { key: 'home', label: '工作台', icon: '⊞' },\n  { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n    { key: 'order-all', label: '全部订单' },\n    { key: 'order-ship', label: '待发货' },\n    { key: 'order-refund', label: '退款' }\n  ] },\n  { key: 'goods', label: '商品', icon: '◇', children: [\n    { key: 'goods-list', label: '商品列表' },\n    { key: 'goods-cat', label: '分类管理' }\n  ] },\n  { key: 'data', label: '数据', icon: '▤' },\n  { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\nconst active = ref<string>('order-all');\n</script>",
    "vue2ts": "<template>\n\n  <KoleSideMenu :items=\"ITEMS\" :active-key=\"active\" @change=\"active = $event\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSideMenu } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSideMenu },\n  data(): Record<string, unknown> {\n    return {\n      active: 'order-all',\n      ITEMS: [\n        { key: 'home', label: '工作台', icon: '⊞' },\n        { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n          { key: 'order-all', label: '全部订单' },\n          { key: 'order-ship', label: '待发货' },\n          { key: 'order-refund', label: '退款' }\n        ] },\n        { key: 'goods', label: '商品', icon: '◇', children: [\n          { key: 'goods-list', label: '商品列表' },\n          { key: 'goods-cat', label: '分类管理' }\n        ] },\n        { key: 'data', label: '数据', icon: '▤' },\n        { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n      ]\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/SideMenu.html 第 45-58 行的 ITEMS（key/label/icon/badge/children/disabled）与第 152 行 createMenu(document.getElementById(\"menu-default\"), defaults, { active: \"order-all\", open: \"\" })：默认态选中「全部订单」，即 activeKey=\"order-all\"。",
    "prop 名 items / activeKey 见 frameworks/SideMenu.jsx 第 14 行参数表与 frameworks/SideMenu.vue3.vue 第 59-62 行 defineProps；选中变化事件为 change（Vue3/Vue2 同时 emit update:activeKey，见 SideMenu.vue3.vue 第 105-106 行）。"
   ]
  },
  {
   "id": "sidemenu-ex-2",
   "title": "含徽章与禁用项",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <nav class=\"kole-menu\" id=\"menu-badge\" role=\"navigation\" aria-label=\"带徽章的主菜单\"></nav>\n</div>",
   "preview": {
    "show": [
     [
      3
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      4
     ],
     [
      5
     ],
     [
      6
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"带徽章的主菜单\"></nav>",
    "jsx": "import { KoleSideMenu } from 'kole-ui/react';\n\n// badge 渲染条目角标，disabled: true 的条目不可点（SideMenu.jsx 第 24、41 行）\nconst ITEMS = [\n  { key: 'home', label: '工作台', icon: '⊞' },\n  { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n    { key: 'order-all', label: '全部订单' },\n    { key: 'order-ship', label: '待发货' },\n    { key: 'order-refund', label: '退款' }\n  ] },\n  { key: 'goods', label: '商品', icon: '◇', children: [\n    { key: 'goods-list', label: '商品列表' },\n    { key: 'goods-cat', label: '分类管理' }\n  ] },\n  { key: 'data', label: '数据', icon: '▤' },\n  { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\n// 静态展示选中「商品列表」：订单项带 badge: '3'，设置项 disabled: true\n<KoleSideMenu items={ITEMS} activeKey=\"goods-list\" />",
    "vue3": "<script setup>\nimport { KoleSideMenu } from 'kole-ui/vue3';\n\n// 订单项带 badge: '3'，设置项 disabled: true\nconst ITEMS = [\n  { key: 'home', label: '工作台', icon: '⊞' },\n  { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n    { key: 'order-all', label: '全部订单' },\n    { key: 'order-ship', label: '待发货' },\n    { key: 'order-refund', label: '退款' }\n  ] },\n  { key: 'goods', label: '商品', icon: '◇', children: [\n    { key: 'goods-list', label: '商品列表' },\n    { key: 'goods-cat', label: '分类管理' }\n  ] },\n  { key: 'data', label: '数据', icon: '▤' },\n  { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n</script>\n\n<template>\n  <KoleSideMenu :items=\"ITEMS\" active-key=\"goods-list\" />\n</template>",
    "vue2": "<template>\n  <KoleSideMenu :items=\"ITEMS\" active-key=\"goods-list\" />\n</template>\n\n<script>\nimport { KoleSideMenu } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSideMenu },\n  data() {\n    return {\n      ITEMS: [\n        { key: 'home', label: '工作台', icon: '⊞' },\n        { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n          { key: 'order-all', label: '全部订单' },\n          { key: 'order-ship', label: '待发货' },\n          { key: 'order-refund', label: '退款' }\n        ] },\n        { key: 'goods', label: '商品', icon: '◇', children: [\n          { key: 'goods-list', label: '商品列表' },\n          { key: 'goods-cat', label: '分类管理' }\n        ] },\n        { key: 'data', label: '数据', icon: '▤' },\n        { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { KoleSideMenu } from 'kole-ui/react';\n\nexport default function KoleSideMenuDemo(): JSX.Element {\n  // badge 渲染条目角标，disabled: true 的条目不可点（SideMenu.jsx 第 24、41 行）\n  const ITEMS = [\n    { key: 'home', label: '工作台', icon: '⊞' },\n    { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n      { key: 'order-all', label: '全部订单' },\n      { key: 'order-ship', label: '待发货' },\n      { key: 'order-refund', label: '退款' }\n    ] },\n    { key: 'goods', label: '商品', icon: '◇', children: [\n      { key: 'goods-list', label: '商品列表' },\n      { key: 'goods-cat', label: '分类管理' }\n    ] },\n    { key: 'data', label: '数据', icon: '▤' },\n    { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n  ];\n  \n  // 静态展示选中「商品列表」：订单项带 badge: '3'，设置项 disabled: true\n  return (\n    <KoleSideMenu items={ITEMS} activeKey=\"goods-list\" />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleSideMenu :items=\"ITEMS\" active-key=\"goods-list\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSideMenu } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('含徽章与禁用项');\n// 订单项带 badge: '3'，设置项 disabled: true\nconst ITEMS = [\n  { key: 'home', label: '工作台', icon: '⊞' },\n  { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n    { key: 'order-all', label: '全部订单' },\n    { key: 'order-ship', label: '待发货' },\n    { key: 'order-refund', label: '退款' }\n  ] },\n  { key: 'goods', label: '商品', icon: '◇', children: [\n    { key: 'goods-list', label: '商品列表' },\n    { key: 'goods-cat', label: '分类管理' }\n  ] },\n  { key: 'data', label: '数据', icon: '▤' },\n  { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n</script>",
    "vue2ts": "<template>\n\n  <KoleSideMenu :items=\"ITEMS\" active-key=\"goods-list\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSideMenu } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSideMenu },\n  data(): Record<string, unknown> {\n    return {\n      ITEMS: [\n        { key: 'home', label: '工作台', icon: '⊞' },\n        { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n          { key: 'order-all', label: '全部订单' },\n          { key: 'order-ship', label: '待发货' },\n          { key: 'order-refund', label: '退款' }\n        ] },\n        { key: 'goods', label: '商品', icon: '◇', children: [\n          { key: 'goods-list', label: '商品列表' },\n          { key: 'goods-cat', label: '分类管理' }\n        ] },\n        { key: 'data', label: '数据', icon: '▤' },\n        { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n      ]\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/SideMenu.html 第 153 行 createMenu(..., { active: \"goods-list\", open: \"goods\" })：本块选中「商品列表」；角标来自第 47 行 order 项的 badge: \"3\"，禁用项来自第 57 行 setting 项的 disabled: true（渲染为 is-disabled，见 frameworks/SideMenu.css）。",
    "badge / disabled / icon / children 都是 items 的数据字段而非 prop，真实用法仍只有 items + activeKey 两个 prop（frameworks/SideMenu.jsx 第 14 行）；展开态 open 是组件内部 state（第 16 行），不对外暴露。"
   ]
  },
  {
   "id": "sidemenu-ex-3",
   "title": "折叠态（collapsed=true）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <nav class=\"kole-menu\" id=\"menu-alt\" role=\"navigation\" aria-label=\"主菜单替代形态\"></nav>\n</div>",
   "preview": {
    "show": [
     [
      5
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ],
     [
      6
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"主菜单替代形态\"></nav>",
    "jsx": "import { KoleSideMenu } from 'kole-ui/react';\n\n// 折叠态由族参数控制（frameworks/SideMenu.jsx 第 12 行 FAMILY_PARAMS.collapsed），\n// 组件当前未把它暴露为 prop：折叠后仅显示图标，悬停带 children 的父项弹出子菜单（第 65-75 行）。\nconst ITEMS = [\n  { key: 'home', label: '工作台', icon: '⊞' },\n  { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n    { key: 'order-all', label: '全部订单' },\n    { key: 'order-ship', label: '待发货' },\n    { key: 'order-refund', label: '退款' }\n  ] },\n  { key: 'goods', label: '商品', icon: '◇', children: [\n    { key: 'goods-list', label: '商品列表' },\n    { key: 'goods-cat', label: '分类管理' }\n  ] },\n  { key: 'data', label: '数据', icon: '▤' },\n  { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\n<KoleSideMenu items={ITEMS} activeKey=\"order-all\" />",
    "vue3": "<script setup>\nimport { KoleSideMenu } from 'kole-ui/vue3';\n\n// 折叠态由族参数 FAMILY_PARAMS.collapsed 控制（SideMenu.vue3.vue 第 57、68 行），不是 prop\nconst ITEMS = [\n  { key: 'home', label: '工作台', icon: '⊞' },\n  { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n    { key: 'order-all', label: '全部订单' },\n    { key: 'order-ship', label: '待发货' },\n    { key: 'order-refund', label: '退款' }\n  ] },\n  { key: 'goods', label: '商品', icon: '◇', children: [\n    { key: 'goods-list', label: '商品列表' },\n    { key: 'goods-cat', label: '分类管理' }\n  ] },\n  { key: 'data', label: '数据', icon: '▤' },\n  { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n</script>\n\n<template>\n  <KoleSideMenu :items=\"ITEMS\" active-key=\"order-all\" />\n</template>",
    "vue2": "<template>\n  <KoleSideMenu :items=\"ITEMS\" active-key=\"order-all\" />\n</template>\n\n<script>\nimport { KoleSideMenu } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSideMenu },\n  data() {\n    return {\n      ITEMS: [\n        { key: 'home', label: '工作台', icon: '⊞' },\n        { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n          { key: 'order-all', label: '全部订单' },\n          { key: 'order-ship', label: '待发货' },\n          { key: 'order-refund', label: '退款' }\n        ] },\n        { key: 'goods', label: '商品', icon: '◇', children: [\n          { key: 'goods-list', label: '商品列表' },\n          { key: 'goods-cat', label: '分类管理' }\n        ] },\n        { key: 'data', label: '数据', icon: '▤' },\n        { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { KoleSideMenu } from 'kole-ui/react';\n\nexport default function KoleSideMenuDemo(): JSX.Element {\n  // 折叠态由族参数控制（frameworks/SideMenu.jsx 第 12 行 FAMILY_PARAMS.collapsed），\n  // 组件当前未把它暴露为 prop：折叠后仅显示图标，悬停带 children 的父项弹出子菜单（第 65-75 行）。\n  const ITEMS = [\n    { key: 'home', label: '工作台', icon: '⊞' },\n    { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n      { key: 'order-all', label: '全部订单' },\n      { key: 'order-ship', label: '待发货' },\n      { key: 'order-refund', label: '退款' }\n    ] },\n    { key: 'goods', label: '商品', icon: '◇', children: [\n      { key: 'goods-list', label: '商品列表' },\n      { key: 'goods-cat', label: '分类管理' }\n    ] },\n    { key: 'data', label: '数据', icon: '▤' },\n    { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n  ];\n  return (\n    <KoleSideMenu items={ITEMS} activeKey=\"order-all\" />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleSideMenu :items=\"ITEMS\" active-key=\"order-all\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSideMenu } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('折叠态（collapsed=true）');\n// 折叠态由族参数 FAMILY_PARAMS.collapsed 控制（SideMenu.vue3.vue 第 57、68 行），不是 prop\nconst ITEMS = [\n  { key: 'home', label: '工作台', icon: '⊞' },\n  { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n    { key: 'order-all', label: '全部订单' },\n    { key: 'order-ship', label: '待发货' },\n    { key: 'order-refund', label: '退款' }\n  ] },\n  { key: 'goods', label: '商品', icon: '◇', children: [\n    { key: 'goods-list', label: '商品列表' },\n    { key: 'goods-cat', label: '分类管理' }\n  ] },\n  { key: 'data', label: '数据', icon: '▤' },\n  { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n</script>",
    "vue2ts": "<template>\n\n  <KoleSideMenu :items=\"ITEMS\" active-key=\"order-all\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSideMenu } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSideMenu },\n  data(): Record<string, unknown> {\n    return {\n      ITEMS: [\n        { key: 'home', label: '工作台', icon: '⊞' },\n        { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n          { key: 'order-all', label: '全部订单' },\n          { key: 'order-ship', label: '待发货' },\n          { key: 'order-refund', label: '退款' }\n        ] },\n        { key: 'goods', label: '商品', icon: '◇', children: [\n          { key: 'goods-list', label: '商品列表' },\n          { key: 'goods-cat', label: '分类管理' }\n        ] },\n        { key: 'data', label: '数据', icon: '▤' },\n        { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n      ]\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/SideMenu.html 第 156-157 行：var altParams = Object.assign({}, PARAMS, { collapsed: true }); createMenu(document.getElementById(\"menu-alt\"), altParams, { active: \"order-all\", open: \"\" }) —— 第三块是折叠态，选中「全部订单」。",
    "折叠在演示页由族参数 collapsed 驱动，四端实现里它同样是写死的族参数（frameworks/SideMenu.jsx 第 12、18 行，SideMenu.vue3.vue 第 57、68 行），并未暴露 collapsed prop，故片段仍只传 items + activeKey；折叠后悬停父项弹出的浮层依赖 items 的 children 字段（SideMenu.jsx 第 65-75 行）。"
   ]
  }
 ]
}