39 lines
3.6 KiB
JSON
39 lines
3.6 KiB
JSON
{
|
|
"slug": "breadcrumb",
|
|
"mode": "single",
|
|
"examples": [
|
|
{
|
|
"id": "breadcrumb-ex-1",
|
|
"title": "基础用法",
|
|
"titleSrc": "",
|
|
"desc": "",
|
|
"html": "<div class=\"kole-breadcrumb\" id=\"app\" role=\"navigation\"></div>",
|
|
"preview": {
|
|
"show": [
|
|
[
|
|
0
|
|
]
|
|
],
|
|
"hide": [],
|
|
"mode": "single"
|
|
},
|
|
"previewSafe": true,
|
|
"previewUnsafeReasons": [],
|
|
"source": "curated",
|
|
"code": {
|
|
"html": "<div class=\"kole-breadcrumb\" role=\"navigation\"></div>",
|
|
"jsx": "import { KoleBreadcrumb } from 'kole-ui/react';\n\nconst ITEMS = [\n { label: '首页', key: 'home' },\n { label: '订单管理', key: 'order' },\n { label: '订单详情', key: 'detail' },\n];\n\nfunction goTo(item) {\n console.log('跳转到：' + item.key);\n}\n\n<KoleBreadcrumb items={ITEMS} onSelect={goTo} />",
|
|
"vue3": "<template>\n <KoleBreadcrumb :items=\"ITEMS\" @select=\"goTo\" />\n</template>\n\n<script setup>\nimport { KoleBreadcrumb } from 'kole-ui/vue3';\n\nconst ITEMS = [\n { label: '首页', key: 'home' },\n { label: '订单管理', key: 'order' },\n { label: '订单详情', key: 'detail' }\n];\n\nfunction goTo(item) {\n console.log('跳转到：' + item.key);\n}\n</script>",
|
|
"vue2": "<template>\n <KoleBreadcrumb :items=\"ITEMS\" @select=\"goTo\" />\n</template>\n\n<script>\nimport { KoleBreadcrumb } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleBreadcrumb },\n data() {\n return {\n ITEMS: [\n { label: '首页', key: 'home' },\n { label: '订单管理', key: 'order' },\n { label: '订单详情', key: 'detail' }\n ]\n };\n },\n methods: {\n goTo(item) {\n console.log('跳转到：' + item.key);\n }\n }\n};\n</script>",
|
|
"tsx": "import { KoleBreadcrumb } from 'kole-ui/react';\n\nexport default function KoleBreadcrumbDemo(): JSX.Element {\n const ITEMS = [\n { label: '首页', key: 'home' },\n { label: '订单管理', key: 'order' },\n { label: '订单详情', key: 'detail' },\n ];\n \n function goTo(item) {\n console.log('跳转到：' + item.key);\n }\n return (\n <KoleBreadcrumb items={ITEMS} onSelect={goTo} />\n );\n}",
|
|
"vue3ts": "<template>\n\n <KoleBreadcrumb :items=\"ITEMS\" @select=\"goTo\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleBreadcrumb } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\nconst ITEMS = [\n { label: '首页', key: 'home' },\n { label: '订单管理', key: 'order' },\n { label: '订单详情', key: 'detail' }\n];\n\nfunction goTo(item) {\n console.log('跳转到：' + item.key);\n}\n</script>",
|
|
"vue2ts": "<template>\n\n <KoleBreadcrumb :items=\"ITEMS\" @select=\"goTo\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleBreadcrumb } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleBreadcrumb },\n data(): Record<string, unknown> {\n return {\n ITEMS: [\n { label: '首页', key: 'home' },\n { label: '订单管理', key: 'order' },\n { label: '订单详情', key: 'detail' }\n ]\n };\n },\n methods: {\n goTo(item) {\n console.log('跳转到：' + item.key);\n }\n }\n};\n</script>"
|
|
},
|
|
"notes": [
|
|
"依据 frameworks/Breadcrumb.html 内联脚本的 DATA 三段（首页/订单管理/订单详情，key 为 home/order/detail）、末项加 is-current、分隔符「/」以及点击提示「跳转到：+key」；items 见 Breadcrumb.jsx 形参与 Breadcrumb.vue3 defineProps，选中事件 onSelect / select 见 Breadcrumb.jsx 与 Breadcrumb.vue3 defineEmits。"
|
|
]
|
|
}
|
|
],
|
|
"curated": true
|
|
}
|