bee-navbars

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

使用

使用单独的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

Navbar.Toggle

Menu

Menu.Item

Menu.SubMenu

开发调试

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