bee-breadcrumb

breadcrumb ui component for react

Usage no npm install needed!

<script type="module">
  import beeBreadcrumb from 'https://cdn.skypack.dev/bee-breadcrumb';
</script>

README

bee-breadcrumb

npm version Build Status devDependency Status

Breadcrumb 常用来指定当前页面位置，添加类active类激活Breadcrumb.Item.不要同时设置active和href,设置了active会将子元素渲染成span,覆盖a.

使用

使用单独的bee-breadcrumb包

组件引入

先进行下载bee-breadcrumb包

npm install --save bee-breadcrumb

组件调用

import Alert from 'bee-breadcrumb';

React.render(<div>
    <Breadcrumb>
        <Breadcrumb.Item href="#">
          Home
        </Breadcrumb.Item>
        <Breadcrumb.Item href='http://getbootstrap.com/components/#breadcrumbs'>
          Library
        </Breadcrumb.Item>
        <Breadcrumb.Item active>
          Data
        </Breadcrumb.Item>
    </Breadcrumb>
</div>, document.getElementById('target'));

样式引入

  • 可以使用link引入dist目录下bee-alert.css
<link rel="stylesheet" href="./node_modules/build/bee-breadcrumb.css">
  • 可以在js中import样式
import "./node_modules/src/Breadcrumb.scss"
//或是
import "./node_modules/build/bee-breadcrumb.css"

API

参数 说明 类型 默认值
active 如果设置成true,渲染成span而不是a bool false
href 给内部a标签设置的属性 string ''
title 给内部a标签设置的属性 string ''

开发调试

$ git clone https://github.com/tinper-bee/bee-breadcrumb
$ cd bee-breadcrumb
$ npm install
$ npm run dev