mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:ant-design/ant-design

Browse Source
This commit is contained in:
afc163 2016-09-29 12:16:01 +08:00
commit a6131e65f5
7 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/dropdown/demo/basic.md
View File

@ -19,13 +19,13 @@ import { Menu, Dropdown, Icon } from 'antd';
const menu = ( const menu = (
<Menu> <Menu>
<Menu.Item> <Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">第一个菜单项</a> <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">第二个菜单项</a> <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">第三个菜单项</a> <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3d menu item</a>
</Menu.Item> </Menu.Item>
</Menu> </Menu>
); );
@ -33,7 +33,7 @@ const menu = (
ReactDOM.render( ReactDOM.render(
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#"> <a className="ant-dropdown-link" href="#">
触发链接 <Icon type="down" /> Hover me <Icon type="down" />
</a> </a>
</Dropdown> </Dropdown>
, mountNode); , mountNode);

16
components/dropdown/demo/dropdown-button.md
View File

@ -14,39 +14,41 @@ title:
A button is on the left, and a related functional menu is on the right. A button is on the left, and a related functional menu is on the right.
````jsx ````jsx
import { Menu, Dropdown, Button, Icon } from 'antd'; import { Menu, Dropdown, Button, Icon, message } from 'antd';
function handleButtonClick(e) { function handleButtonClick(e) {
message.info('Click on left button.');
console.log('click left button', e); console.log('click left button', e);
} }
function handleMenuClick(e) { function handleMenuClick(e) {
message.info('Click on menu item.');
console.log('click', e); console.log('click', e);
} }
const menu = ( const menu = (
<Menu onClick={handleMenuClick}> <Menu onClick={handleMenuClick}>
<Menu.Item key="1">第一个菜单项</Menu.Item> <Menu.Item key="1">1st menu item</Menu.Item>
<Menu.Item key="2">第二个菜单项</Menu.Item> <Menu.Item key="2">2nd menu item</Menu.Item>
<Menu.Item key="3">第三个菜单项</Menu.Item> <Menu.Item key="3">3d menu item</Menu.Item>
</Menu> </Menu>
); );
ReactDOM.render( ReactDOM.render(
<div> <div>
<Dropdown.Button onClick={handleButtonClick} overlay={menu} type="ghost"> <Dropdown.Button onClick={handleButtonClick} overlay={menu} type="ghost">
某功能按钮 Dropdown
</Dropdown.Button> </Dropdown.Button>
<Dropdown.Button <Dropdown.Button
onClick={handleButtonClick} overlay={menu} onClick={handleButtonClick} overlay={menu}
type="ghost" disabled type="ghost" disabled
style={{ marginLeft: 8 }} style={{ marginLeft: 8 }}
> >
某功能按钮 Dropdown
</Dropdown.Button> </Dropdown.Button>
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<Button type="ghost" style={{ marginLeft: 8 }}> <Button type="ghost" style={{ marginLeft: 8 }}>
按钮 <Icon type="down" /> Button <Icon type="down" />
</Button> </Button>
</Dropdown> </Dropdown>
</div> </div>

12
components/dropdown/demo/event.md
View File

@ -14,23 +14,23 @@ title:
An event will be triggered when you click menu items, in which you can make different operations according to item's key. An event will be triggered when you click menu items, in which you can make different operations according to item's key.
````jsx ````jsx
import { Menu, Dropdown, Icon } from 'antd'; import { Menu, Dropdown, Icon, message } from 'antd';
const onClick = function ({ key }) { const onClick = function ({ key }) {
console.log(`点击了菜单${key}`); message.info(`Click on item ${key}`);
}; };
const menu = ( const menu = (
<Menu onClick={onClick}> <Menu onClick={onClick}>
<Menu.Item key="1">第一个菜单项</Menu.Item> <Menu.Item key="1">1st menu item</Menu.Item>
<Menu.Item key="2">第二个菜单项</Menu.Item> <Menu.Item key="2">2nd memu item</Menu.Item>
<Menu.Item key="3">第三个菜单项</Menu.Item> <Menu.Item key="3">3d menu item</Menu.Item>
</Menu> </Menu>
); );
ReactDOM.render( ReactDOM.render(
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#"> <a className="ant-dropdown-link" href="#">
鼠标移入，点击菜单 <Icon type="down" /> Hover me, Click menu item <Icon type="down" />
</a> </a>
</Dropdown> </Dropdown>
, mountNode); , mountNode);

8
components/dropdown/demo/item.md
View File

@ -19,20 +19,20 @@ import { Menu, Dropdown, Icon } from 'antd';
const menu = ( const menu = (
<Menu> <Menu>
<Menu.Item key="0"> <Menu.Item key="0">
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">第一个菜单项</a> <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
</Menu.Item> </Menu.Item>
<Menu.Item key="1"> <Menu.Item key="1">
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">第二个菜单项</a> <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
</Menu.Item> </Menu.Item>
<Menu.Divider /> <Menu.Divider />
<Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item> <Menu.Item key="3" disabled>3d menu item（disabled）</Menu.Item>
</Menu> </Menu>
); );
ReactDOM.render( ReactDOM.render(
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#"> <a className="ant-dropdown-link" href="#">
鼠标移入 <Icon type="down" /> Hover me <Icon type="down" />
</a> </a>
</Dropdown> </Dropdown>
, mountNode); , mountNode);

8
components/dropdown/demo/overlay-visible.md
View File

@ -33,9 +33,9 @@ const OverlayVisible = React.createClass({
render() { render() {
const menu = ( const menu = (
<Menu onClick={this.handleMenuClick}> <Menu onClick={this.handleMenuClick}>
<Menu.Item key="1">点我不会关闭菜单</Menu.Item> <Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
<Menu.Item key="2">点我还是不会关闭菜单</Menu.Item> <Menu.Item key="2">Clicking me will not close the menu also.</Menu.Item>
<Menu.Item key="3">点我才会关闭菜单</Menu.Item> <Menu.Item key="3">Clicking me will close the menu</Menu.Item>
</Menu> </Menu>
); );
return ( return (
@ -44,7 +44,7 @@ const OverlayVisible = React.createClass({
visible={this.state.visible} visible={this.state.visible}
> >
<a className="ant-dropdown-link" href="#"> <a className="ant-dropdown-link" href="#">
鼠标移入 <Icon type="down" /> Hover me <Icon type="down" />
</a> </a>
</Dropdown> </Dropdown>
); );

12
components/dropdown/demo/sub-menu.md
View File

@ -19,11 +19,11 @@ const SubMenu = Menu.SubMenu;
const menu = ( const menu = (
<Menu> <Menu>
<Menu.Item>第一个菜单项</Menu.Item> <Menu.Item>1st menu item</Menu.Item>
<Menu.Item>第二个菜单项</Menu.Item> <Menu.Item>2nd menu item</Menu.Item>
<SubMenu title="子菜单"> <SubMenu title="sub menu">
<Menu.Item>第三个菜单项</Menu.Item> <Menu.Item>3d menu item</Menu.Item>
<Menu.Item>第四个菜单项</Menu.Item> <Menu.Item>4th menu item</Menu.Item>
</SubMenu> </SubMenu>
</Menu> </Menu>
); );
@ -31,7 +31,7 @@ const menu = (
ReactDOM.render( ReactDOM.render(
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#"> <a className="ant-dropdown-link" href="#">
多级菜单 <Icon type="down" /> Cascading menu <Icon type="down" />
</a> </a>
</Dropdown> </Dropdown>
, mountNode); , mountNode);

8
components/dropdown/demo/trigger.md
View File

@ -19,20 +19,20 @@ import { Menu, Dropdown, Icon } from 'antd';
const menu = ( const menu = (
<Menu> <Menu>
<Menu.Item key="0"> <Menu.Item key="0">
<a href="http://www.alipay.com/">第一个菜单项</a> <a href="http://www.alipay.com/">1st menu item</a>
</Menu.Item> </Menu.Item>
<Menu.Item key="1"> <Menu.Item key="1">
<a href="http://www.taobao.com/">第二个菜单项</a> <a href="http://www.taobao.com/">2nd menu item</a>
</Menu.Item> </Menu.Item>
<Menu.Divider /> <Menu.Divider />
<Menu.Item key="3">第三个菜单项</Menu.Item> <Menu.Item key="3">3d menu item</Menu.Item>
</Menu> </Menu>
); );
ReactDOM.render(<div> ReactDOM.render(<div>
<Dropdown overlay={menu} trigger={['click']}> <Dropdown overlay={menu} trigger={['click']}>
<a className="ant-dropdown-link" href="#"> <a className="ant-dropdown-link" href="#">
点击触发 <Icon type="down" /> Click me <Icon type="down" />
</a> </a>
</Dropdown> </Dropdown>
</div>, mountNode); </div>, mountNode);