mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-04 04:58:55 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
afc163
commit
a6131e65f5
@ -19,13 +19,13 @@ import { Menu, Dropdown, Icon } from 'antd';
|
||||
const menu = (
|
||||
<Menu>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
@ -33,7 +33,7 @@ const menu = (
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
触发链接 <Icon type="down" />
|
||||
Hover me <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
, mountNode);
|
||||
|
||||
@ -14,39 +14,41 @@ title:
|
||||
A button is on the left, and a related functional menu is on the right.
|
||||
|
||||
````jsx
|
||||
import { Menu, Dropdown, Button, Icon } from 'antd';
|
||||
import { Menu, Dropdown, Button, Icon, message } from 'antd';
|
||||
|
||||
function handleButtonClick(e) {
|
||||
message.info('Click on left button.');
|
||||
console.log('click left button', e);
|
||||
}
|
||||
|
||||
function handleMenuClick(e) {
|
||||
message.info('Click on menu item.');
|
||||
console.log('click', e);
|
||||
}
|
||||
|
||||
const menu = (
|
||||
<Menu onClick={handleMenuClick}>
|
||||
<Menu.Item key="1">第一个菜单项</Menu.Item>
|
||||
<Menu.Item key="2">第二个菜单项</Menu.Item>
|
||||
<Menu.Item key="3">第三个菜单项</Menu.Item>
|
||||
<Menu.Item key="1">1st menu item</Menu.Item>
|
||||
<Menu.Item key="2">2nd menu item</Menu.Item>
|
||||
<Menu.Item key="3">3d menu item</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Dropdown.Button onClick={handleButtonClick} overlay={menu} type="ghost">
|
||||
某功能按钮
|
||||
Dropdown
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button
|
||||
onClick={handleButtonClick} overlay={menu}
|
||||
type="ghost" disabled
|
||||
style={{ marginLeft: 8 }}
|
||||
>
|
||||
某功能按钮
|
||||
Dropdown
|
||||
</Dropdown.Button>
|
||||
<Dropdown overlay={menu}>
|
||||
<Button type="ghost" style={{ marginLeft: 8 }}>
|
||||
按钮 <Icon type="down" />
|
||||
Button <Icon type="down" />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
@ -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.
|
||||
|
||||
````jsx
|
||||
import { Menu, Dropdown, Icon } from 'antd';
|
||||
import { Menu, Dropdown, Icon, message } from 'antd';
|
||||
const onClick = function ({ key }) {
|
||||
console.log(`点击了菜单${key}`);
|
||||
message.info(`Click on item ${key}`);
|
||||
};
|
||||
|
||||
const menu = (
|
||||
<Menu onClick={onClick}>
|
||||
<Menu.Item key="1">第一个菜单项</Menu.Item>
|
||||
<Menu.Item key="2">第二个菜单项</Menu.Item>
|
||||
<Menu.Item key="3">第三个菜单项</Menu.Item>
|
||||
<Menu.Item key="1">1st menu item</Menu.Item>
|
||||
<Menu.Item key="2">2nd memu item</Menu.Item>
|
||||
<Menu.Item key="3">3d menu item</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
鼠标移入，点击菜单 <Icon type="down" />
|
||||
Hover me, Click menu item <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
, mountNode);
|
||||
|
||||
@ -19,20 +19,20 @@ import { Menu, Dropdown, Icon } from 'antd';
|
||||
const menu = (
|
||||
<Menu>
|
||||
<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 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.Divider />
|
||||
<Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
|
||||
<Menu.Item key="3" disabled>3d menu item（disabled）</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
鼠标移入 <Icon type="down" />
|
||||
Hover me <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
, mountNode);
|
||||
|
||||
@ -33,9 +33,9 @@ const OverlayVisible = React.createClass({
|
||||
render() {
|
||||
const menu = (
|
||||
<Menu onClick={this.handleMenuClick}>
|
||||
<Menu.Item key="1">点我不会关闭菜单</Menu.Item>
|
||||
<Menu.Item key="2">点我还是不会关闭菜单</Menu.Item>
|
||||
<Menu.Item key="3">点我才会关闭菜单</Menu.Item>
|
||||
<Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
|
||||
<Menu.Item key="2">Clicking me will not close the menu also.</Menu.Item>
|
||||
<Menu.Item key="3">Clicking me will close the menu</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
@ -44,7 +44,7 @@ const OverlayVisible = React.createClass({
|
||||
visible={this.state.visible}
|
||||
>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
鼠标移入 <Icon type="down" />
|
||||
Hover me <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
@ -19,11 +19,11 @@ const SubMenu = Menu.SubMenu;
|
||||
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item>第一个菜单项</Menu.Item>
|
||||
<Menu.Item>第二个菜单项</Menu.Item>
|
||||
<SubMenu title="子菜单">
|
||||
<Menu.Item>第三个菜单项</Menu.Item>
|
||||
<Menu.Item>第四个菜单项</Menu.Item>
|
||||
<Menu.Item>1st menu item</Menu.Item>
|
||||
<Menu.Item>2nd menu item</Menu.Item>
|
||||
<SubMenu title="sub menu">
|
||||
<Menu.Item>3d menu item</Menu.Item>
|
||||
<Menu.Item>4th menu item</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
);
|
||||
@ -31,7 +31,7 @@ const menu = (
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
多级菜单 <Icon type="down" />
|
||||
Cascading menu <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
, mountNode);
|
||||
|
||||
@ -19,20 +19,20 @@ import { Menu, Dropdown, Icon } from 'antd';
|
||||
const menu = (
|
||||
<Menu>
|
||||
<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 key="1">
|
||||
<a href="http://www.taobao.com/">第二个菜单项</a>
|
||||
<a href="http://www.taobao.com/">2nd menu item</a>
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
<Menu.Item key="3">第三个菜单项</Menu.Item>
|
||||
<Menu.Item key="3">3d menu item</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Dropdown overlay={menu} trigger={['click']}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
点击触发 <Icon type="down" />
|
||||
Click me <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>, mountNode);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user