Breadcrumb 面包屑

Breadcrumb 面包屑

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

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

API

面包屑

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内联样式	Object	-
children	面包屑子节点，需传入 Breadcrumb.Item	custom	-
maxNode	面包屑显示的最多个数，超出的部分会被隐藏	Number	-
separator	分隔符，可以是文本，也可以是 Icon	ReactNode	<Icon size="xs" type="arrow-right" />

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内联样式	Object	-
children	面包屑节点内容	ReactNode	-
link	面包屑节点链接，如果设置这个属性，则该节点为`<a />` ，否则是`<span />`	String	-

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内联样式	Object	-
children	关键字内容	ReactNode	-

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内联样式	Object	-
children	数字内容	ReactNode	-

代码示例

基本用法

使用 Breadcrumb.Item 来设置面包屑子节点，如果设置其 link 属性就是 <a /> 节点，否则为 <span /> 节点，另外可以使用 Breadcrumb.Keyword 来强调文本，Breadcrumb.Number 来为数字设置特殊样式。

查看源码在线预览

import { Breadcrumb } from "@icedesign/base";
ReactDOM.render(
  <Breadcrumb>
    <Breadcrumb.Item link="javascript:void(0);">Home</Breadcrumb.Item>
    <Breadcrumb.Item link="javascript:void(0);">All Categories</Breadcrumb.Item>
    <Breadcrumb.Item link="javascript:void(0);">
      Women’s Clothing
    </Breadcrumb.Item>
    <Breadcrumb.Item link="javascript:void(0);">
      Blouses & Shirts
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Keyword>T-shirts&nbsp;</Breadcrumb.Keyword>
      <Breadcrumb.Number>78,999</Breadcrumb.Number> Results
    </Breadcrumb.Item>
  </Breadcrumb>,
  mountNode
);

显示省略

当超过设置的最大个数的时候，显示省略号。

查看源码在线预览

import { Breadcrumb } from "@icedesign/base";
ReactDOM.render(
  <Breadcrumb maxNode={5}>
    <Breadcrumb.Item link="javascript:void(0);">Home 1</Breadcrumb.Item>
    <Breadcrumb.Item link="javascript:void(0);">Whatever 2</Breadcrumb.Item>
    <Breadcrumb.Item link="javascript:void(0);">
      All Categories 3
    </Breadcrumb.Item>
    <Breadcrumb.Item link="javascript:void(0);">
      Women’s Clothing 4
    </Breadcrumb.Item>
    <Breadcrumb.Item link="javascript:void(0);">
      Blouses & Shirts 5
    </Breadcrumb.Item>
    <Breadcrumb.Item>T-shirts 6</Breadcrumb.Item>
  </Breadcrumb>,
  mountNode
);

设置分隔符

也可以设置不同的分隔符。

查看源码在线预览

import { Breadcrumb } from "@icedesign/base";
ReactDOM.render(
  <Breadcrumb separator="/">
    <Breadcrumb.Item link="javascript:void(0);">Home</Breadcrumb.Item>
    <Breadcrumb.Item link="javascript:void(0);">All Categories</Breadcrumb.Item>
    <Breadcrumb.Item link="javascript:void(0);">
      Women’s Clothing
    </Breadcrumb.Item>
    <Breadcrumb.Item link="javascript:void(0);">
      Blouses & Shirts
    </Breadcrumb.Item>
    <Breadcrumb.Item>T-shirts</Breadcrumb.Item>
  </Breadcrumb>,
  mountNode
);

安装方法

开发指南

何时使用

API

面包屑

代码示例

相关区块

暂无相关区块