3.3.55 • Published 6 years ago

@beisen-phoenix/breadcrumb

Licence

ISC

Version

3.3.55

Deps

Size

32 kB

Vulns

Weekly

Summary Dependency Versions

面包屑组件

@beisen-phoenix/breadcrumb

概述

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

API

参数	说明	类型	默认值	是否必传
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>
		</>
	);
}