# BreadCrumb 面包屑

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/bread-crumb/freepass)
- 平台：PC
- 维护者：赵俊飞
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s49
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[BreadCrumb]

## 代码演示

### 基础

最基础的用法

```jsx
import React, { Component } from 'react';
import { BreadCrumb, Icon } from '@weapp/ui';
import { Link, Route, RouteComponentProps, withRouter } from 'react-router-dom';

class BreadCrumbDemo extends Component<RouteComponentProps> {
  render() {
    const s: unique symbol = Symbol();
    const data = [
      (<i>data Home</i>),
      'data Child',
      'data GrandChild'
    ]
    return (
      <div>
        <h3>itme render</h3>
        <BreadCrumb>
          <BreadCrumb.Item>Home</BreadCrumb.Item>
          <BreadCrumb.Item>Child</BreadCrumb.Item>
          <BreadCrumb.Item>GrandChild</BreadCrumb.Item>
        </BreadCrumb>

        <h3>data render</h3>
        <BreadCrumb data={data} />
      </div>
    );
  }
}

export default BreadCrumbDemo;
```

### 图标

自定义图标

```jsx
import { Component } from 'react';
import { BreadCrumb, Icon } from '@weapp/ui';
import { RouteComponentProps } from 'react-router-dom';

class BreadCrumbDemo extends Component<RouteComponentProps> {
  render() {

    return (
      <div>
        <BreadCrumb>
          <BreadCrumb.Item>
            <Icon size={"md"} name={"Icon-crmHome-o"} />
          </BreadCrumb.Item>
          <BreadCrumb.Item>
              <Icon size={"md"} name={"Icon-personnel"} />
              <span>Child</span>
          </BreadCrumb.Item>
          <BreadCrumb.Item>GrandChild</BreadCrumb.Item>
        </BreadCrumb>

        {/* 

        <BreadCrumb >
          <BreadCrumb.Item>Home</BreadCrumb.Item>
          <BreadCrumb.Separator>-</BreadCrumb.Separator>
          <BreadCrumb.Item>Child</BreadCrumb.Item>
          <BreadCrumb.Separator>-</BreadCrumb.Separator>
          <BreadCrumb.Item>GrandChild</BreadCrumb.Item>
        </BreadCrumb>

        <h3>和 route 一起使用</h3>
        <Route path={`${this.props.match.url}/home`} children={<span>Home</span>} />
        <Route path={`${this.props.match.url}/link`} children={<span>Link</span>} />
        <BreadCrumb separator={<Icon size="xxs" name="Icon-Right-arrow01" />}>
          <BreadCrumb.Item>
            <Link style={{ textDecoration: 'none' }} to={`${this.props.match.url}/home`}>Home</Link>
          </BreadCrumb.Item>
          <BreadCrumb.Item>
            <Link style={{ textDecoration: 'none' }} to={`${this.props.match.url}/link`}>Link</Link>
          </BreadCrumb.Item>
          <BreadCrumb.Item>GrandChild</BreadCrumb.Item>
        </BreadCrumb> */}
      </div>
    );
  }
}

export default BreadCrumbDemo;
```

### 分隔符

设置 separator,可以自定义统一分隔符; 使用 Breadcrumb.Separator 可以自定义单个分隔符。

```jsx
import React, { Component } from 'react';
import { BreadCrumb, } from '@weapp/ui';
import { RouteComponentProps } from 'react-router-dom';

class BreadCrumbDemo extends Component<RouteComponentProps> {
  render() {

    return (
      <div>
        <BreadCrumb separator=">">
          <BreadCrumb.Item>Home</BreadCrumb.Item>
          <BreadCrumb.Item>Child</BreadCrumb.Item>
          <BreadCrumb.Item>GrandChild</BreadCrumb.Item>
          <BreadCrumb.Separator>→</BreadCrumb.Separator>
          <BreadCrumb.Item>Last</BreadCrumb.Item>
        </BreadCrumb>
      </div>
    );
  }
}

export default BreadCrumbDemo;
```

### 路由

结合路由使用.

```jsx
import { Component } from 'react';
import { BreadCrumb, Icon } from '@weapp/ui';
import { RouteComponentProps, Route, Link, withRouter } from 'react-router-dom';

class BreadCrumbDemo extends Component<RouteComponentProps> {
  render() {
    return (
      <div>
        <BreadCrumb separator={<Icon size="xxs" name="Icon-Right-arrow01" />}>
          <BreadCrumb.Item>
            <Link style={{ textDecoration: 'none' }} to={`${this.props.match.url}/home`}>Home</Link>
          </BreadCrumb.Item>
          <BreadCrumb.Item>
            <Link style={{ textDecoration: 'none' }} to={`${this.props.match.url}/link`}>Link</Link>
          </BreadCrumb.Item>
          <BreadCrumb.Item>GrandChild</BreadCrumb.Item>
        </BreadCrumb>
        <Route path={`${this.props.match.url}/home`} children={<span>Home page</span>} />
        <Route path={`${this.props.match.url}/link`} children={<span>Link page</span>} />
      </div>
    );
  }
}

export default withRouter(BreadCrumbDemo);
```

## API

### 参数说明如下:

#### BreadCrumb

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| separator | 分隔符 | React.Node | 否 | / |
| className | 样式类名 | String | 否 |  |
| style | 内联样式 | CSSProperties | 否 |  |
| data | 面包屑数组 | ArrayReact.Node | 否 |  |
#### BreadCrumb.Item

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| children | 显示内容 | React.Node | 否 |  |
| className | 样式类名 | String | 否 |  |
| style | 内联样式 | CSSProperties | 否 |  |
```js
  // 例如 
  <BreadCrumb.Item className='customItem' style={{color:'red'}} >Home</BreadCrumb.Item>
```

#### BreadCrumb.Separator

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| children | 显示的分隔符 | React.Node | 否 |  |
| className | 样式类名 | String | 否 |  |
| style | 内联样式 | CSSProperties | 否 |  |
```js
  // 例如 
  <BreadCrumb.Separator className='customSe' style={{color:'red'}} >☆</BreadCrumb.Separator>
```
