mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 32 Packages Projects Releases Wiki Activity

Add dropdown button

Browse Source
This commit is contained in:
afc163 2015-12-02 15:18:15 +08:00
parent b25260b954
commit 2923cd8799
10 changed files with 121 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
---
````jsx
import { Menu, Dropdown, Button, Icon } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item>
@ -23,15 +23,9 @@ const menu = <Menu>
ReactDOM.render(
<Dropdown overlay={menu}>
<Button>
某按钮 <Icon type="down" />
</Button>
<a className="ant-dropdown-link" href="#">
触发链接 <Icon type="down" />
</a>
</Dropdown>
, document.getElementById('components-dropdown-demo-basic'));
````
<style>
.code-box-demo .ant-btn {
margin-right: 6px;
}
</style>

30
components/dropdown/demo/dropdown-button.md Normal file
View File

@ -0,0 +1,30 @@
# 带下拉框的按钮
- order: 4
左边是按钮，右边是额外的相关功能菜单。
---
````jsx
import { Menu, Dropdown } from 'antd';
const DropdownButton = Dropdown.Button;
const menu = <Menu>
<Menu.Item>
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
</Menu.Item>
</Menu>;
ReactDOM.render(
<DropdownButton overlay={menu} type="primary">
某功能按钮
</DropdownButton>
, document.getElementById('components-dropdown-demo-dropdown-button'));
````

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

@ -7,7 +7,7 @@
---
````jsx
import { Menu, Dropdown, Button, Icon } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
const onClick = function({key}) {
console.log('点击了菜单' + key);
};
@ -20,9 +20,9 @@ const menu = <Menu onClick={onClick}>
ReactDOM.render(
<Dropdown overlay={menu}>
<Button>
<a className="ant-dropdown-link" href="#">
鼠标移入，点击菜单 <Icon type="down" />
</Button>
</a>
</Dropdown>
, document.getElementById('components-dropdown-demo-event'));
````

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

@ -7,7 +7,7 @@
---
````jsx
import { Menu, Dropdown, Button, Icon } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item key="0">
@ -22,9 +22,9 @@ const menu = <Menu>
ReactDOM.render(
<Dropdown overlay={menu}>
<Button>
<a className="ant-dropdown-link" href="#">
鼠标移入 <Icon type="down" />
</Button>
</a>
</Dropdown>
, document.getElementById('components-dropdown-demo-item'));
````

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

@ -2,12 +2,12 @@
- order: 2
点击或鼠标移入触发。
默认是移入触发菜单，可以点击触发。
---
````jsx
import { Menu, Dropdown, Button, Icon } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item key="0">
@ -22,14 +22,9 @@ const menu = <Menu>
ReactDOM.render(<div>
<Dropdown overlay={menu} trigger={['click']}>
<Button type="primary">
<a className="ant-dropdown-link" href="#">
点击触发 <Icon type="down" />
</Button>
</Dropdown>
<Dropdown overlay={menu}>
<Button>
鼠标移入 <Icon type="down" />
</Button>
</a>
</Dropdown>
</div>, document.getElementById('components-dropdown-demo-trigger'));
````

36
components/dropdown/dropdown-button.jsx Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import Button from '../button';
import Icon from '../icon';
import Dropdown from './dropdown';
const ButtonGroup = Button.Group;
const align = {
points: ['tr', 'br'],
overlay: {
adjustX: 1,
adjustY: 1,
},
offset: [0, 3],
targetOffset: [0, 0],
};
export default React.createClass({
getDefaultProps() {
return {
align: align,
type: 'default',
};
},
render() {
return <ButtonGroup className="ant-dropdown-button">
<Button type={this.props.type}>
{this.props.children}
</Button>
<Dropdown {...this.props}>
<Button type={this.props.type}>
<Icon type="down" />
</Button>
</Dropdown>
</ButtonGroup>;
}
});

16
components/dropdown/dropdown.jsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import Dropdown from 'rc-dropdown';
export default React.createClass({
getDefaultProps: function () {
return {
transitionName: 'slide-up',
prefixCls: 'ant-dropdown',
};
},
render: function () {
return (
<Dropdown {...this.props} />
);
}
});

19
components/dropdown/index.jsx
View File

@ -1,16 +1,5 @@
import React from 'react';
import Dropdown from 'rc-dropdown';
import Dropdown from './dropdown';
import DropdownButton from './dropdown-button';
export default React.createClass({
getDefaultProps: function () {
return {
transitionName: 'slide-up',
prefixCls: 'ant-dropdown',
};
},
render: function () {
return (
<Dropdown {...this.props} />
);
}
});
Dropdown.Button = DropdownButton;
export default Dropdown;

12
components/dropdown/index.md
View File

@ -19,10 +19,18 @@
| 成员 | 说明 | 类型 | 默认值 |
|-------------|------------------|--------------------|--------------|
| trigger | 触发下拉的行为 | "click" or "hover" | hover |
| overlay | 菜单节点 | React.Element | 无 |
| onClick | 点击菜单后的回调 | function({key,keyPath,item,domEvent}) {} | 无 |
| overlay | 菜单节点 | [Menu](/components/menu) | 无 |
菜单可由 `antd.Menu` 取得，可设置 `onSelect` 回调，菜单还包括菜单项 `antd.Menu.Item`，分割线 `antd.Menu.Divider`。
> 注意： Menu.Item 必须设置唯一的 key 属性。
### DropdownButton
| 成员 | 说明 | 类型 | 默认值 |
|-------------|------------------|--------------------|--------------|
| type | 按钮类型，和 [Button](/components/button) 一致 | String | 'default' |
| onClick | 点击左侧按钮的回调，和 [Button](/components/button) 一致 | Function | 无 |
| trigger | 触发下拉的行为 | "click" or "hover" | hover |
| overlay | 菜单节点 | [Menu](/components/menu) | 无 |

12
style/components/dropdown.less
View File

@ -125,8 +125,18 @@
}
.@{dropdown-prefix-cls}-link {
font-size: 12px;
.anticon-down {
.iconfont-size-under-12px(7px);
.iconfont-size-under-12px(8px);
font-weight: bold;
}
}
.@{dropdown-prefix-cls}-button {
&.ant-btn-group > .ant-btn:last-child:not(:first-child) {
padding-right: 8px;
}
.anticon-down {
.iconfont-size-under-12px(10px);
}
}