{ "slug": "breadcrumb", "mode": "single", "examples": [ { "id": "breadcrumb-ex-1", "title": "基础用法", "titleSrc": "", "desc": "", "html": "
", "preview": { "show": [ [ 0 ] ], "hide": [], "mode": "single" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
", "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", "vue3": "\n\n", "vue2": "\n\n", "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 \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "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 }