@uiw/react-breadcrumb

Breadcrumb 面包屑
===


显示当前页面的路径，快速返回之前的任意页面。

``jsx
import { Breadcrumb } from 'uiw';
// or
import Breadcrumb from '@uiw/react-breadcrumb';
`

$3

适用广泛的基础用法，在 Breadcrumb 中使用 Breadcrumb.Item 标签表示从首页开始的每一级。

`jsx mdx:preview
import React from 'react';
import { Breadcrumb } from 'uiw';

export default function Demo() {
return(

首页
活动管理
活动列表
活动详情

);
}
`

$3

使用 separator=">" 可以自定义分隔符，分隔符也可以是图标。

`jsx mdx:preview
import React from 'react';
import { Breadcrumb, Divider, Icon } from 'uiw';

export default function Demo() {
return(



);
}
`

$3

图标放在文字前面。注意文字要使用 span 包裹起来，图标 需要跟 span 同级。Breadcrumb.Item 定义 href 参数的话，Item 上的参数就全部是超链原始属性。

`jsx mdx:preview
import React from 'react';
import { Breadcrumb, Icon } from 'uiw';

const stylIcon = { marginRight: 3, top: 2, display: 'inline-flex' }

export default function Demo() {
return(



);
}
`

Breadcrumb

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| style | 样式 | String | - |
| className | 样式名称 | String | w-breadcrumb |
| tagName | 设置子节点标签名，默认 标签，也可以指定路由 | String | a |
| separator | 分隔符自定义，定义所有子组件的分隔符。 | String | / |

其它参数可根据 tagName 来设置，默认 标签时，可设置 href="https://wwww.google.com" 或者 target="_blank" 等参数，你可以设置 react-router-dom 路由 ，例如：

`jsx
import { Breadcrumb, Icon } from 'uiw';
import { Link } from 'react-router-dom';

const Demo = () => {
return (


Home


)
}
`

Breadcrumb.Item

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| className | 样式名称 | String | w-breadcrumb-itme` |
| separator | 分隔符自定义，子组件可以单独定义不同的分隔符。 | String | - |
| active | 激活。 | String | - |