Skip to content
a bee-navbars 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
HISTORY.md
README.md
changelog.md
index.html
package.json

README.md

bee-navbar

npm version Build Status devDependency Status

帮助用户依赖导航在各个页面中进行跳转。顶部导航提供全局性的类目和功能.

使用

使用单独的bee-navbar包

组件引入

先进行下载bee-navbar包

npm install --save bee-navbar

组件调用

import Navbar from 'bee-navbar';
import FormControl from 'bee-form-control';

const NavItem = Navbar.NavItem;
const Header = Navbar.Header;
const Brand = Navbar.Brand;
const Collapse = Navbar.Collapse;
const Toggle = Navbar.Toggle;
const Nav = Navbar.Nav;


class Demo1 extends Component {
	constructor(props, context) {
	    super(props, context);
	    this.state = {
	    	expanded : false
	    }
	}
	onToggle(value) {
		this.setState({expanded:value});
	}
	render(){
		return( 
			<div>
				<Navbar inverse expanded={this.state.expanded} onToggle={this.onToggle.bind(this)}>
				    <Header>
					    <Brand>
					        	<a href="#">React-Bootstrap</a>
					    </Brand>
					    <Toggle />
				    </Header>

				    <Collapse>
					    <Nav>
						    <NavItem eventKey={1} href="#">Link</NavItem>
						    <NavItem eventKey={2} href="#">Link</NavItem>
						    
					    </Nav>
					    <Navbar.Form pullRight>
					          <FormControl type="text" placeholder="Search" />
					    </Navbar.Form>
				    </Collapse>
				</Navbar>

			</div>
		)
	}
}
React.render(Demo1, document.getElementById('app');

样式引入

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

API

Navbar

参数 说明 类型 默认值
componentClass 自定义组件元素 element type nav
expanded 设置导航条是否展开,针对小屏幕 bool false
fixedBottom 设置固定在底部 bool false
fixedTop 设置固定在顶部 bool false
inverse 黑色背景 bool false
onToggle 切换导航条显示隐藏 针对小屏幕 func -

Navbar.Toggle

参数 说明 类型 默认值
children 切换的文字或图标 element type 如例子
onClick 自定义方法 func -

开发调试

$ git clone https://github.com/tinper-bee/bee-navbar
$ cd bee-navbar
$ npm install
$ npm run dev
You can’t perform that action at this time.