From ad267e5838a6bba5b0ab8fc084a00f54b28b9f07 Mon Sep 17 00:00:00 2001
From: renzp94 <1074720760@qq.com>
Date: Thu, 14 Sep 2023 16:50:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=B7=BB=E5=8A=A0Breadcrumb?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.mts               | 10 ++++
 docs/components/Breadcrumb.md            | 69 ++++++++++++++++++++++++
 docs/example/breadcrumb/basic.svelte     | 20 +++++++
 docs/example/breadcrumb/icon.svelte      | 20 +++++++
 docs/example/breadcrumb/item.svelte      | 27 ++++++++++
 docs/example/breadcrumb/separator.svelte | 21 ++++++++
 6 files changed, 167 insertions(+)
 create mode 100644 docs/components/Breadcrumb.md
 create mode 100644 docs/example/breadcrumb/basic.svelte
 create mode 100644 docs/example/breadcrumb/icon.svelte
 create mode 100644 docs/example/breadcrumb/item.svelte
 create mode 100644 docs/example/breadcrumb/separator.svelte

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 4217faa..88ec11c 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -46,6 +46,16 @@ const components = [
         }
       ]
     },
+    {
+      text: '导航',
+      collapsed: false,
+      items: [
+        {
+          text: 'Breadcrumb 面包屑',
+          link: '/components/Breadcrumb'
+        },
+      ]
+    },
 ]
 
 const nav = [
diff --git a/docs/components/Breadcrumb.md b/docs/components/Breadcrumb.md
new file mode 100644
index 0000000..5cb4f9b
--- /dev/null
+++ b/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 | 自定义分隔符 |
\ No newline at end of file
diff --git a/docs/example/breadcrumb/basic.svelte b/docs/example/breadcrumb/basic.svelte
new file mode 100644
index 0000000..20dd61e
--- /dev/null
+++ b/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} />
diff --git a/docs/example/breadcrumb/icon.svelte b/docs/example/breadcrumb/icon.svelte
new file mode 100644
index 0000000..fe19354
--- /dev/null
+++ b/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} />
diff --git a/docs/example/breadcrumb/item.svelte b/docs/example/breadcrumb/item.svelte
new file mode 100644
index 0000000..72feb4b
--- /dev/null
+++ b/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>
diff --git a/docs/example/breadcrumb/separator.svelte b/docs/example/breadcrumb/separator.svelte
new file mode 100644
index 0000000..f7c7c85
--- /dev/null
+++ b/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>