@uiw/react-breadcrumb v4.22.3

Breadcrumb 面包屑

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

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

基础用法

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

import React from 'react';
import { Breadcrumb } from 'uiw';

export default function Demo() {
  return(
    <Breadcrumb>
      <Breadcrumb.Item>首页</Breadcrumb.Item>
      <Breadcrumb.Item separator=">">活动管理</Breadcrumb.Item>
      <Breadcrumb.Item>活动列表</Breadcrumb.Item>
      <Breadcrumb.Item active>活动详情</Breadcrumb.Item>
    </Breadcrumb>
  );
}

自定义分隔符

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

import React from 'react';
import { Breadcrumb, Divider, Icon } from 'uiw';

export default function Demo() {
  return(
    <div>
      <Breadcrumb>
        <Breadcrumb.Item><a href="#">Home</a></Breadcrumb.Item>
        <Breadcrumb.Item separator=">"><a href="#">Library</a></Breadcrumb.Item>
        <Breadcrumb.Item active>Data</Breadcrumb.Item>
      </Breadcrumb>
      <Divider />
      <Breadcrumb separator="#">
        <Breadcrumb.Item><a href="#">Home</a></Breadcrumb.Item>
        <Breadcrumb.Item separator={<span>+</span>}><a href="#">Home</a></Breadcrumb.Item>
        <Breadcrumb.Item separator={<Icon type="home" verticalAlign="baseline" />}><a href="#">Icon</a></Breadcrumb.Item>
        <Breadcrumb.Item separator=">"><a href="#">Library</a></Breadcrumb.Item>
        <Breadcrumb.Item active>Data</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

带有图标和连接的

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

import React from 'react';
import { Breadcrumb, Icon } from 'uiw';

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

export default function Demo() {
  return(
    <div>
      <Breadcrumb>
        <Breadcrumb.Item>
          <a href="#"><Icon style={stylIcon} type="home"/></a>
        </Breadcrumb.Item>
        <Breadcrumb.Item separator=">">
          <a href="#"><Icon style={stylIcon} type="apple"/>Library</a>
        </Breadcrumb.Item>
        <Breadcrumb.Item separator=">">
          <a href="#"><Icon style={stylIcon} type="pie-chart"/>Chart</a>
        </Breadcrumb.Item>
        <Breadcrumb.Item separator="">
          <a href="#"><Icon style={{...stylIcon, marginRight: 0}} type="star-on"/> Chart</a>
        </Breadcrumb.Item>
        <Breadcrumb.Item separator="" active>Data</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

Breadcrumb

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

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

const Demo = () => {
  return (
    <Breadcrumb>
      <Breadcrumb.Item tagName={Link} to="/home">
        <Icon type="apple"/> Home
      </Breadcrumb.Item>
    </Breadcrumb>
  )
}

Breadcrumb.Item