feat(ui): 添加Breadcrumb组件文档

docs/.vitepress/config.mts

@@ -46,6 +46,16 @@ const components = [
         }
       ]
     },
+    {
+      text: '导航',
+      collapsed: false,
+      items: [
+        {
+          text: 'Breadcrumb 面包屑',
+          link: '/components/Breadcrumb'
+        },
+      ]
+    },
 ]
 
 const nav = [

docs/components/Breadcrumb.md

@@ -0,0 +1,69 @@
+---
+title: Breadcrumb 面包屑
+lang: zh-CN
+---
+
+# Breadcrumb 面包屑
+
+显示当前页面在系统层级结构中的位置，并能向上返回。
+
+## 何时使用
+
+- 当系统拥有超过两级以上的层级结构时；
+- 当需要告知用户『你在哪里』时；
+- 当需要向上导航的功能时。
+
+## 基本使用
+
+最简单的用法。
+
+<demo src="../../../../example/breadcrumb/basic.svelte"  github='Breadcrumb'></demo>
+
+## 带图标的
+
+图标放在文字前面。如果使用`icon`指定的话只能使用`Icon`组件支持的图标。
+
+<demo src="../../../../example/breadcrumb/icon.svelte"  github='Breadcrumb'></demo>
+
+## 自定义内容
+
+可通过插槽`item`来自定义内容。
+
+<demo src="../../../../example/breadcrumb/item.svelte"  github='Breadcrumb'></demo>
+
+## 分隔符
+
+可通过插槽`separator`来自定义分隔符。
+
+<demo src="../../../../example/breadcrumb/separator.svelte"  github='Breadcrumb'></demo>
+
+## API
+
+### Props 属性
+
+| 属性  | 说明         | 类型               | 默认值 | 版本 |
+| ----- | ------------ | ------------------ | ------ | ---- |
+| items | 渲染元素数据 | `BreadcrumbItem[]` | -      |      |
+
+```ts
+interface BreadcrumbItem {
+  title?: string
+  path?: string
+  icon?: IconName
+  disabled?: boolean
+}
+```
+
+### Event 事件
+
+| 事件  | 说明     | 类型                                        |
+| ----- | -------- | ------------------------------------------- |
+| click | 点击事件 | `MouseEventHandler<T> \| undefined \| null` |
+
+
+### Slot 插槽
+
+| 事件      | 说明         |
+| --------- | ------------ |
+| item      | 自定义内容   |
+| separator | 自定义分隔符 |

docs/example/breadcrumb/basic.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { Breadcrumb } from 'adorn-ui'
+
+  const items = [
+    {
+      title: 'Project',
+      path: '/project',
+      disabled: true,
+    },
+    {
+      title: 'List',
+      path: '/list',
+    },
+    {
+      title: 'Details',
+    },
+  ]
+</script>
+
+<Breadcrumb {items} />

docs/example/breadcrumb/icon.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { Breadcrumb } from 'adorn-ui'
+
+  const items = [
+    {
+      title: 'Project',
+      path: '/project',
+      icon: 'git-repository',
+    },
+    {
+      title: 'List',
+      path: '/list',
+    },
+    {
+      title: 'Details',
+    },
+  ]
+</script>
+
+<Breadcrumb {items} />

docs/example/breadcrumb/item.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { Breadcrumb, Icon } from 'adorn-ui'
+
+  const items = [
+    {
+      title: 'Project',
+      path: '/project',
+      icon: 'git-repository',
+    },
+    {
+      title: 'List',
+      path: '/list',
+    },
+    {
+      title: 'Details',
+    },
+  ]
+</script>
+
+<Breadcrumb {items}>
+  <svelte:fragment slot="item" let:item>
+    <span>{item.title}</span>
+    {#if item.icon}
+      <Icon name={item.icon} />
+    {/if}
+  </svelte:fragment>
+</Breadcrumb>

docs/example/breadcrumb/separator.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { Breadcrumb, Icon } from 'adorn-ui'
+
+  const items = [
+    {
+      title: 'Project',
+      path: '/project',
+    },
+    {
+      title: 'List',
+      path: '/list',
+    },
+    {
+      title: 'Details',
+    },
+  ]
+</script>
+
+<Breadcrumb {items}>
+  <Icon name="arrow-right-double" slot="separator" />
+</Breadcrumb>