面包屑组件

@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

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>
		</>
	);
}