a bee-breadcrumb component for tinper-bee
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
demo
dist
docs
src
test
.eslintignore
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
HISTORY.md
README.md
index.html
package.json

README.md

bee-breadcrumb

npm version Build Status devDependency Status

Breadcrumb 常用来指定当前页面位置,添加类active类激活Breadcrumb.Item.不要同时设置activehref,设置了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