# @beisen-phoenix/breadcrumb

> 面包屑组件

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/breadcrumb
pnpm add @beisen-phoenix/breadcrumb
yarn add @beisen-phoenix/breadcrumb
bun add @beisen-phoenix/breadcrumb
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-08-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 32.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/breadcrumb
- npm.io page: https://npm.io/package/@beisen-phoenix/breadcrumb

## Dependencies (8)

- [omit.js](https://npm.io/package/omit.js.md) ^1.0.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@beisen-phoenix/icon](https://npm.io/package/@beisen-phoenix/icon.md) ^3.2.54
- [@beisen-phoenix/tooltip](https://npm.io/package/@beisen-phoenix/tooltip.md) ^3.3.55
- [@beisen-phoenix/dropdown](https://npm.io/package/@beisen-phoenix/dropdown.md) ^3.3.55
- [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^3.3.55
- [@beisen-phoenix/single-select-list](https://npm.io/package/@beisen-phoenix/single-select-list.md) ^3.3.55

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.54 — 2019-11-25
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.49 — 2019-11-22
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41-beta.1 — 2019-11-21
- 3.3.41 — 2019-11-21
- 3.3.39 — 2019-11-20
- … 268 more at https://npm.io/package/@beisen-phoenix/breadcrumb/versions

## README

# 面包屑组件

> @beisen-phoenix/breadcrumb

## 概述

> 显示当前页面在系统层级结构中的位置，并能向上返回。

## API

### Breadcrumb

| 参数              | 说明                                           | 类型                 | 默认值 | 是否必传 |
| ----------------- | ---------------------------------------------- | -------------------- | ------ | -------- |
| max               | 最大层级                                       | number               | -      | 否       |
| children          | 子节点，具体导航路径，参照下列 Breadcrumb.Item | string               |        | 否       |
| className         | 自定义样式                                     | string               | --     | 否       |
| onClick           | 单击事件                                       | (index:number)=>void | --     | 否       |
| getPopupContainer | 悬浮元素挂载的容器                             | ()=>HTMLElement      | --     | 否       |

### Breadcrumb.Item

| 参数              | 说明               | 类型            | 默认值 | 是否必传 |
| ----------------- | ------------------ | --------------- | ------ | -------- |
| text              | 显示文本           | string          | -      | 否       |
| icon              | 图标               | ReactNode       | -      | 否       |
| className         | 自定义样式         | string          | --     | 否       |
| getPopupContainer | 悬浮元素挂载的容器 | ()=>HTMLElement | --     | 否       |

## changeLog

> 2019/11/6 Breadcrumb 和 Breadcrumb.Item 新增 getPopupContainer 属性，用于定义悬浮元素的挂载容器

## demo

```ts
import React from 'react';
import Breadcrumb from '../../src';

export default function App() {
	return (
		<>
			<Breadcrumb
				max={14}
				onClick={index => {
					alert(index);
				}}>
				<Breadcrumb.Item text='首页'></Breadcrumb.Item>
				<Breadcrumb.Item text='第二页'></Breadcrumb.Item>
				<Breadcrumb.Item text='联系我们联系我们联系我们联系我们联系我们联系我们联系我们联系我们联系我们联系我们'></Breadcrumb.Item>
				<Breadcrumb.Item text='联系我们2'></Breadcrumb.Item>
				<Breadcrumb.Item text='联系我们3'> </Breadcrumb.Item>
				<Breadcrumb.Item text='联系我们4'></Breadcrumb.Item>
			</Breadcrumb>
		</>
	);
}
```

---
_Source: https://npm.io/package/@beisen-phoenix/breadcrumb · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._