161 lines
19 KiB
JSON
161 lines
19 KiB
JSON
{
|
||
"slug": "topmenu",
|
||
"curated": true,
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "topmenu-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 { 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 <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}",
|
||
"vue3": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\nconst activeKey = ref('order-all');\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</script>",
|
||
"vue2": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script>\nimport { KoleTopMenu } from 'kole-ui/vue2';\nexport default {\n components: { KoleTopMenu },\n data() {\n return {\n activeKey: 'order-all',\n 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 };\n }\n};\n</script>",
|
||
"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<string>('order-all');\n return <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}\n\nexport default OrderTopMenu;",
|
||
"vue3ts": "<template>\n\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\nconst activeKey = ref<string>('order-all');\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</script>",
|
||
"vue2ts": "<template>\n\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleTopMenu },\n data(): Record<string, unknown> {\n return {\n activeKey: 'order-all',\n 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 };\n }\n};\n</script>"
|
||
},
|
||
"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": "<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 { 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 <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}",
|
||
"vue3": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\nconst activeKey = ref('goods-list');\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>",
|
||
"vue2": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script>\nimport { KoleTopMenu } from 'kole-ui/vue2';\nexport default {\n components: { KoleTopMenu },\n data() {\n return {\n activeKey: 'goods-list',\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 { 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<string>('goods-list');\n return <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}\n\nexport default BadgeTopMenu;",
|
||
"vue3ts": "<template>\n\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\nconst activeKey = ref<string>('goods-list');\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 <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleTopMenu },\n data(): Record<string, unknown> {\n return {\n activeKey: 'goods-list',\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/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": "<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 { 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 <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}",
|
||
"vue3": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\n// 一级项带 children 即渲染下拉面板，点击父级切换展开（内部 open 状态）\nconst activeKey = ref('order-all');\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</script>",
|
||
"vue2": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script>\nimport { KoleTopMenu } from 'kole-ui/vue2';\nexport default {\n components: { KoleTopMenu },\n data() {\n return {\n activeKey: 'order-all',\n 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 };\n }\n};\n</script>",
|
||
"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<string>('order-all');\n return <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}\n\nexport default DropdownTopMenu;",
|
||
"vue3ts": "<template>\n\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\n// 一级项带 children 即渲染下拉面板，点击父级切换展开（内部 open 状态）\nconst activeKey = ref<string>('order-all');\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</script>",
|
||
"vue2ts": "<template>\n\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleTopMenu },\n data(): Record<string, unknown> {\n return {\n activeKey: 'order-all',\n 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 };\n }\n};\n</script>"
|
||
},
|
||
"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，点击父级项即切换展开。"
|
||
]
|
||
}
|
||
]
|
||
}
|