bee-navbars
navbars ui component for react
Last updated 4 years ago by ahua52 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bee-navbars 
SYNC missed versions from official npm registry.

bee-navbars

npm version Build Status devDependency Status

帮助用户依赖导航在各个页面中进行跳转。分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提供多级结构来收纳和排列网站架构

使用

使用单独的bee-navbars包

组件引入

先进行下载bee-navbars包

npm install --save bee-navbars

组件调用

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


const Menu = Navbar.Menu;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

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

React.render(<div>
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>
		)
	}
}
</div>, document.getElementById('target1');


React.render(<div>
class Demo2 extends Component {
	constructor(props, context) {
	    super(props, context);
	    this.state = {
	    	current : 1
	    }
	}
	handleClick(e) {
	    console.log('click ', e);
	    this.setState({
	      current: e.key,
	    });
	  }
	render(){
		return( 
			<Menu onClick={this.handleClick.bind(this)}
		        style={{ width: 240 }}
		        defaultOpenKeys={['sub1']}
		        selectedKeys={[this.state.current]}
		        mode="inline"
		      >
		        <SubMenu key="sub1" title={<span><span>Navigation One</span></span>}>
		          <MenuItemGroup title="Item 1">
		            <Menu.Item key="1">Option 1</Menu.Item>
		            <Menu.Item key="2">Option 2</Menu.Item>
		          </MenuItemGroup>
		          <MenuItemGroup title="Item 2">
		            <Menu.Item key="3">Option 3</Menu.Item>
		            <Menu.Item key="4">Option 4</Menu.Item>
		          </MenuItemGroup>
		        </SubMenu>
		        <SubMenu key="sub2" title={<span><span>Navigation Two</span></span>}>
		          <Menu.Item key="5">Option 5</Menu.Item>
		          <Menu.Item key="6">Option 6</Menu.Item>
		          <SubMenu key="sub3" title="Submenu">
		            <Menu.Item key="7">Option 7</Menu.Item>
		            <Menu.Item key="8">Option 8</Menu.Item>
		          </SubMenu>
		        </SubMenu>
		        <SubMenu key="sub4" title={<span><span>Navigation Three</span></span>}>
		          <Menu.Item key="9">Option 9</Menu.Item>
		          <Menu.Item key="10">Option 10</Menu.Item>
		          <Menu.Item key="11">Option 11</Menu.Item>
		          <Menu.Item key="12">Option 12</Menu.Item>
		        </SubMenu>
		      </Menu>
		)
	}
}
</div>, document.getElementById('target2'));

样式引入

//如果例子中引入其他组件,需将此组件样式引入

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

Menu

参数 说明 类型 默认值
theme 主题颜色 String: light dark light
mode 菜单类型,现在支持垂直、水平、和内嵌模式三种 String: vertical horizontal inline vertical
selectedKeys 当前选中的菜单项 key 数组 Array -
defaultSelectedKeys 初始选中的菜单项 key 数组 Array -
openKeys 当前展开的 SubMenu 菜单项 key 数组 Array -
defaultOpenKeys 初始展开的 SubMenu 菜单项 key 数组 -
onOpenChange SubMenu 展开/关闭的回调 Function(openKeys: string[]) noop
onSelect 被选中时调 Function({ item, key, selectedKeys }) -
onDeselect 取消选中时调用,仅在 multiple 生效 Function({ item, key, selectedKeys }) -
onClick 点击 menuitem 调用此函数,参数为 {item, key, keyPath} function -
style 根节点样式 Object -

Menu.Item

参数 说明 类型 默认值
disabled 是否禁用 Boolean false
key item 的唯一标志 String -

##Menu.SubMenu

参数 说明 类型 默认值
disabled 是否禁用 Boolean false
key 唯一标志 String
title 子菜单项值 String or React.Element
children 子菜单的菜单项 (MenuItem or SubMenu)[]
onTitleClick 点击子菜单标题 Function({ eventKey, domEvent })
disabled 是否禁用 Boolean false
key item 的唯一标志 String -

开发调试

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

Current Tags

  • 0.1.1                                ...           latest (4 years ago)

14 Versions

  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
  • 0.0.13                                ...           4 years ago
  • 0.0.12                                ...           4 years ago
  • 0.0.11                                ...           4 years ago
  • 0.0.10                                ...           4 years ago
  • 0.0.9                                ...           4 years ago
  • 0.0.8                                ...           4 years ago
  • 0.0.7                                ...           4 years ago
  • 0.0.6                                ...           4 years ago
  • 0.0.5                                ...           4 years ago
  • 0.0.4                                ...           4 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.2                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 14
This Month 16
Last Day 0
Last Week 0
Last Month 1
Dependencies (13)
Dev Dependencies (9)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |