1.0.1 • Published 2 years ago

responsive-breadcrumb v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

responsive-breadcrumb

responsive breadcrumb that in one line

响应式地一行展示面包屑列表。如果列表过长在父容器内展示不下,则动态计算面包屑展示宽度,多余面包屑收至省略列表并鼠标悬浮展示。

使用效果

breadcrumb-demo

代码示例

import Breadcrumb from 'responsive-breadcrumb'

const breadcrumbItems = [
  { key: 'home', name: 'home' },
  { key: 'path1', name: 'path1' },
  { key: 'path2', name: 'path2' },
  { key: 'path3', name: 'path3' },
]

function handleBreadcrumbItemClick(item: { key: string, name: string }) {
  // do something with item
}

<Breadcrumb
  className="responsive-breadcrumb"
  items={breadcrumbItems}
  separator="/"
  onClick={handleBreadcrumbItemClick}
/>

组件参数

参数说明类型默认值
className自定义 classNamestring-
items面包屑数据列表Array<{ key: string, name: string }>-
separator面包屑之间的分隔符或图标string / ReactElement'>'
onClick面包屑点击回调(item) => void-