Breadcrumb 面包屑

使用场景#

用来告知用户当前的位置，以及当前页面在整个网站中的位置，属于一种辅助的导航方式，适用于清晰且具多层次结构的网站，每一层内容为层级归属关系，方便用户返回上一级或各个层级的页面。

示例#

基本示例#

inline

() => (
  <Breadcrumb onItemClick={console.log}>
    <BreadcrumbItem key="home">首页</BreadcrumbItem>
    <BreadcrumbItem key="doc">文档</BreadcrumbItem>
    <BreadcrumbItem key="breadcrumb">Breadcurmb</BreadcrumbItem>
  </Breadcrumb>
)

() => (
  <Breadcrumb onItemClick={console.log}>
    <BreadcrumbItem key="home">首页</BreadcrumbItem>
    <BreadcrumbItem key="doc">文档</BreadcrumbItem>
    <BreadcrumbItem key="breadcrumb">Breadcurmb</BreadcrumbItem>
  </Breadcrumb>
)

自定义分隔线#

inline

// 以下变量从其他模块中引入：
//  Icon

() => (
  <Breadcrumb separator={<Icon type="arrow-right-bold" />}>
    <BreadcrumbItem>首页</BreadcrumbItem>
    <BreadcrumbItem>文档</BreadcrumbItem>
    <BreadcrumbItem>Breadcurmb</BreadcrumbItem>
  </Breadcrumb>
)

// 以下变量从其他模块中引入：
//  Icon

() => (
  <Breadcrumb separator={<Icon type="arrow-right-bold" />}>
    <BreadcrumbItem>首页</BreadcrumbItem>
    <BreadcrumbItem>文档</BreadcrumbItem>
    <BreadcrumbItem>Breadcurmb</BreadcrumbItem>
  </Breadcrumb>
)

API#

Breadcrumb#

字段	描述
separator	`ReactNode` 分隔线
onItemClick	`(key: string) => void` 点击单个节点时的回调

BreadcrumbItem#

字段	描述
isLast	`boolean`
separator	`ReactNode`
className	`string`