add dropdown

This commit is contained in:
yiminghe 2015-06-08 19:10:47 +08:00
parent 80fcde6247
commit ac2899efbb
7 changed files with 65 additions and 2 deletions

View File

@ -0,0 +1,30 @@
# 基本
- order: 0
点击出发
---
````jsx
var Menu = antd.Menu;
var Dropdown = antd.Dropdown;
function onClick(key){
alert('select ' + key);
}
var menu = <Menu style={{width:140}} onClick={onClick}>
<Menu.Item disabled>disabled</Menu.Item>
<Menu.Item key="1">第一个菜单项</Menu.Item>
<Menu.Divider/>
<Menu.Item key="2">第二个菜单项</Menu.Item>
</Menu>;
React.render(
<Dropdown animation="slide-up" overlay={menu} trigger="click">
<button className="ant-btn ant-btn-ghost">点我下来 <span className="anticon anticon-caret-down"></span></button>
</Dropdown>
, document.getElementById('components-dropdown-demo-basic'));
````

View File

@ -0,0 +1 @@
module.exports = require('rc-dropdown');

View File

@ -0,0 +1,27 @@
# Dropdown
- category: Components
- chinese: 下拉菜单
---
下拉菜单
## 何时使用
需要点击一个触点出现一个菜单时使用
## API
属性如下
| 成员 | 说明 | 类型 | 默认值 |
|----------|----------------|------------------|--------------|
| animation | 动画名称 | String ("slide-up") | 无 |
| trigger | 触发下来行为 | "click" or "mouse" | 无 |
| overlay | 菜单节点 | React.Element | 无 |
菜单可由 antd.Menu 取得,可设置 onClick 回调,菜单还包括菜单项 antd.Menu.Item分割线 antd.Menu.Divider
注意: Menu.Item 必须设置唯一的 key 属性

View File

@ -0,0 +1 @@
module.exports = require('rc-menu');

View File

@ -4,7 +4,9 @@ var antd = {
datepicker: require('./components/datepicker'),
tooltip: require('./components/tooltip'),
tab: require('./components/tab'),
modal: require('./components/modal')
modal: require('./components/modal'),
Menu:require('./components/menu'),
Dropdown:require('./components/dropdown')
};
module.exports = window.antd = antd;

View File

@ -17,6 +17,8 @@
"gregorian-calendar-format": "~3.0.1",
"rc-calendar": "~3.8.0",
"rc-dialog": "~4.1.1",
"rc-dropdown": "~1.0.0",
"rc-menu": "~3.3.0",
"rc-tabs": "~5.0.5",
"rc-tooltip": "~1.2.0"
},

View File

@ -16,7 +16,7 @@
{% block styles %}{% endblock %}
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<!-- react -->
<script src="https://t.alipayobjects.com/images/T12TdfXlpbXXXXXXXX.js"></script>
<script src="https://a.alipayobjects.com/react/0.13.2/react.js"></script>
<script src="/static/script.js"></script>
{% block scripts %}{% endblock %}
</head>