面包屑组件
@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>
</>
);
}