{
 "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
}