Skip to content

Latest commit

 

History

History
108 lines (91 loc) · 2.65 KB

index.md

File metadata and controls

108 lines (91 loc) · 2.65 KB
Raw

rc-menu@2.x

demo

<style> .menu-container{ margin: 20px 40px; } #long .rc-menu { height: 200px; width:200px; overflow:auto; } </style>
single select
multiple select
scrollable menu 
/** @jsx React.DOM */
var React = require('react');
var Menu = require('../');
var SubMenu = Menu.SubMenu;
var MenuItem = Menu.Item;

function handleSelect(selectedKey) {
  console.log('selected ' + selectedKey);
}

function handleDeselect(selectedKey) {
  console.log('deselect ' + selectedKey);
}

var titleRight = <span>sub menu <i className="fa fa-caret-right pull-right"></i></span>;
var titleRight1 = <span>sub menu 1 <i className="fa fa-caret-right pull-right"></i></span>;
var titleRight2 = <span>sub menu 2 <i className="fa fa-caret-right pull-right"></i></span>;
var titleRight3 = <span>sub menu 3 <i className="fa fa-caret-right pull-right"></i></span>;
var multiple = document.getElementById('multiple');
var single = document.getElementById('single');

render(false,single);
render(true,multiple);


var children = [];
for(var i=0;i<20;i++){
  children.push(<MenuItem>{i}</MenuItem>);
}
React.render(<Menu>{children}</Menu>,document.getElementById('long'));


function render(multiple,container){
  var leftMenu = (
    <Menu multiple={multiple} onSelect={handleSelect} onDeselect={handleDeselect}>
      <SubMenu title={titleRight}>
          <MenuItem>0-1</MenuItem>
          <MenuItem>0-2</MenuItem>
      </SubMenu>
      <MenuItem key="10">1</MenuItem>
      <MenuItem key="31">outer</MenuItem>
      <SubMenu title={titleRight1}>
          <MenuItem key="31">inner inner</MenuItem>
          <MenuItem disabled className="rc-menu-item-divider" />
          <SubMenu
            openOnHover={false}
            key="110"
            title={titleRight2}
            >
              <MenuItem key="231">inn</MenuItem>
              <SubMenu title={titleRight3}>
                <Menu>
                  <MenuItem key="231">inner inner</MenuItem>
                  <MenuItem key="242">inner inner2</MenuItem>
                </Menu>
              </SubMenu>
          </SubMenu>
      </SubMenu>
      <MenuItem disabled>disabled</MenuItem>
      <MenuItem key="2311">outer3</MenuItem>
    </Menu>
  );
  React.render(leftMenu, container);
}