Breadcrumb 面包屑

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

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

API

Breadcrumb

Breadcrumb.Item

ARIA and KeyBoard

代码示例

基本用法

使用 Breadcrumb.Item 来设置面包屑子节点，如果设置其 link 属性就是 <a /> 节点，否则为 <span /> 节点。

查看源码在线预览

import { Breadcrumb } from '@alifd/next';
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>
            T-shirts&nbsp; <b>78,999</b> Results
        </Breadcrumb.Item>
    </Breadcrumb>,
    mountNode);

显示省略

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

查看源码在线预览

import { Breadcrumb } from '@alifd/next';
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 '@alifd/next';
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);

相关区块

暂无相关区块