161 lines
20 KiB
JSON
161 lines
20 KiB
JSON
{
|
||
"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 行）。"
|
||
]
|
||
}
|
||
]
|
||
}
|