bee-navbar
帮助用户依赖导航在各个页面中进行跳转。顶部导航提供全局性的类目和功能.
使用
使用单独的bee-navbar包
组件引入
先进行下载bee-navbar包
npm install --save bee-navbar
组件调用
;; const NavItem = NavbarNavItem;const Header = NavbarHeader;const Brand = NavbarBrand;const Collapse = NavbarCollapse;const Toggle = NavbarToggle;const Nav = NavbarNav; { superprops context; thisstate = expanded : false } { this; } { return <div> <Navbar inverse expanded=thisstateexpanded onToggle=thisonToggle> <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> <NavbarForm pullRight> <FormControl type="text" placeholder="Search" /> </NavbarForm> </Collapse> </Navbar> </div> }React
样式引入
- 可以使用link引入dist目录下bee-Navbar.css
<link rel="stylesheet" href="./node_modules/build/bee-navbar.css">
- 可以在js中import样式
//或是
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