# 面包屑项

## 使用方法

面包屑里的一格。它可以是一个去处、一个动作、当前位置，也可以是一个同级菜单的开关。

第一格之后的分隔符由整条面包屑决定。写了 `href` 就是链接；没写地址就渲染成按钮；`isCurrent` 让它变成纯文本，并标上 `aria-current="page"`。`menu` 把这一格变成同级去处的菜单开关，所以它和 `href` 只能二选一，同时写时用菜单。

```vue
<script setup lang="ts">
import { BreadcrumbItem, Breadcrumbs } from '@astryx-vue/core/Breadcrumbs'
</script>

<template>
  <Breadcrumbs>
    <BreadcrumbItem href="#home">
      首页
    </BreadcrumbItem>
    <BreadcrumbItem href="#settings">
      设置
    </BreadcrumbItem>
    <BreadcrumbItem is-current>
      个人资料
    </BreadcrumbItem>
  </Breadcrumbs>
</template>
```

## 示例

常见的用法和不同的状态。

### 基础

面包屑里的几格链接。上级页面写 href；最后一格用 isCurrent 标成当前页面，渲染成纯文本。

```vue
<script setup lang="ts">
import { BreadcrumbItem, Breadcrumbs } from '@astryx-vue/core/Breadcrumbs'
</script>

<template>
  <Breadcrumbs>
    <BreadcrumbItem href="#home">
      Home
    </BreadcrumbItem>
    <BreadcrumbItem href="#settings">
      Settings
    </BreadcrumbItem>
    <BreadcrumbItem is-current>
      Profile
    </BreadcrumbItem>
  </Breadcrumbs>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `href` | `string` | — | 要跳去的地址。不写就渲染成按钮。和 `menu` 二选一：带菜单的这一格是开关，不是链接。 |
| `as` | `NavLinkComponent` | `'a'` | 链接换成别的根组件时用，例如路由链接。写给有 `href` 又不是当前页的那几格。 |
| `isCurrent` | `boolean` | `false` | 标成当前页面。渲染成 `<span>`，并写上 `aria-current="page"`。当前这一格也还能挂菜单。 |
| `menu` | `BreadcrumbMenuOption[]` | — | 把这一格变成同级去处的菜单开关。数组和下拉菜单的数据格式一样，可以有分隔线、勾选项和单选组。用了 `menu` 插槽时这个属性不起作用。 |
| `menuSize` | `'sm' \| 'md' \| 'lg'` | supporting 变体下是 `sm`，其余是 `md` | 菜单里每一行的大小。 |

## 插槽

- `default`：这一格的文字。
- `startIcon`：文字前面的图标。
- `menu`：手写的菜单内容，可以放勾选项和单选组。用了它就不再看 `menu` 属性。

## 事件

- `click(event: MouseEvent)`：点击这一格时触发。当前页这一格会挡掉默认行为，也不触发事件。