{
"slug": "topmenu",
"curated": true,
"mode": "scenarios",
"examples": [
{
"id": "topmenu-ex-1",
"title": "默认态（选中：全部订单）",
"titleSrc": "demo",
"desc": "",
"html": "\n \n
",
"preview": {
"show": [
[
1
]
],
"hide": [
[
0
],
[
2
],
[
3
],
[
4
],
[
5
],
[
6
]
],
"mode": "scenarios"
},
"previewSafe": true,
"previewUnsafeReasons": [],
"source": "curated",
"code": {
"html": "",
"jsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', 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 OrderTopMenu() {\n const [activeKey, setActiveKey] = useState('order-all');\n return ;\n}",
"vue3": "\n \n\n\n",
"vue2": "\n \n\n\n",
"tsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', 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 OrderTopMenu(): JSX.Element {\n const [activeKey, setActiveKey] = useState('order-all');\n return ;\n}\n\nexport default OrderTopMenu;",
"vue3ts": "\n\n \n\n\n",
"vue2ts": "\n\n \n\n\n"
},
"notes": [
"依据 frameworks/TopMenu.html 第 45-58 行的 ITEMS 数组（key/label/icon/badge/children/disabled）与第 152 行 createMenu(..., { active: \"order-all\" })：默认态选中「全部订单」，即 activeKey=\"order-all\"。",
"prop 名 items / activeKey 见 frameworks/TopMenu.jsx 第 14 行参数表与 frameworks/TopMenu.vue3.vue 第 59-62 行 defineProps，选中变化事件为 change（vue3 / vue2 同时 emit update:activeKey）。"
]
},
{
"id": "topmenu-ex-2",
"title": "含徽章与禁用项",
"titleSrc": "demo",
"desc": "",
"html": "\n \n
",
"preview": {
"show": [
[
3
]
],
"hide": [
[
0
],
[
1
],
[
2
],
[
4
],
[
5
],
[
6
]
],
"mode": "scenarios"
},
"previewSafe": true,
"previewUnsafeReasons": [],
"source": "curated",
"code": {
"html": "",
"jsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\n// badge 显示条目角标，disabled 的条目不响应点击（is-disabled）\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 BadgeTopMenu() {\n const [activeKey, setActiveKey] = useState('goods-list');\n return ;\n}",
"vue3": "\n \n\n\n",
"vue2": "\n \n\n\n",
"tsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\n// badge 显示条目角标，disabled 的条目不响应点击（is-disabled）\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 BadgeTopMenu(): JSX.Element {\n const [activeKey, setActiveKey] = useState('goods-list');\n return ;\n}\n\nexport default BadgeTopMenu;",
"vue3ts": "\n\n \n\n\n",
"vue2ts": "\n\n \n\n\n"
},
"notes": [
"依据 frameworks/TopMenu.html 第 153 行 createMenu(..., { active: \"goods-list\", open: \"goods\" })：本示例选中「商品列表」并带角标；角标来自 ITEMS 第 47 行的 badge: \"3\"，禁用项来自第 57 行的 disabled: true（渲染为 kole-menu-item.is-disabled，见 frameworks/TopMenu.css）。",
"badge / disabled / icon 均为 items 数据字段而非 prop，真实用法仍是 items + activeKey 两个 prop（frameworks/TopMenu.jsx 第 14 行）。"
]
},
{
"id": "topmenu-ex-3",
"title": "下拉展开态（订单 → 子项）",
"titleSrc": "demo",
"desc": "",
"html": "\n \n
",
"preview": {
"show": [
[
5
]
],
"hide": [
[
0
],
[
1
],
[
2
],
[
3
],
[
4
],
[
6
]
],
"mode": "scenarios"
},
"previewSafe": true,
"previewUnsafeReasons": [],
"source": "curated",
"code": {
"html": "",
"jsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\n// 带 children 的一级项点击后在原位展开下拉面板；\n// 演示页第三块用 createMenu(..., { open: 'order' }) 预置了这一展开态。\nconst ITEMS = [\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];\n\nfunction DropdownTopMenu() {\n const [activeKey, setActiveKey] = useState('order-all');\n return ;\n}",
"vue3": "\n \n\n\n",
"vue2": "\n \n\n\n",
"tsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\n// 带 children 的一级项点击后在原位展开下拉面板；\n// 演示页第三块用 createMenu(..., { open: 'order' }) 预置了这一展开态。\nconst ITEMS = [\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];\n\nfunction DropdownTopMenu(): JSX.Element {\n const [activeKey, setActiveKey] = useState('order-all');\n return ;\n}\n\nexport default DropdownTopMenu;",
"vue3ts": "\n\n \n\n\n",
"vue2ts": "\n\n \n\n\n"
},
"notes": [
"依据 frameworks/TopMenu.html 第 157 行 createMenu(..., { active: \"order-all\", open: \"order\" })：下拉展开态由 items 中 order 项的 children 决定，展开箭头/面板类名 kole-menu-children、kole-menu-arrow 见 frameworks/TopMenu.css。",
"展开状态是组件内部 open（frameworks/TopMenu.jsx 第 16 行）而非对外 prop，因此片段只传 items + activeKey，点击父级项即切换展开。"
]
}
]
}