mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
add dropdown
This commit is contained in:
parent
80fcde6247
commit
ac2899efbb
30
components/dropdown/demo/basic.md
Normal file
30
components/dropdown/demo/basic.md
Normal 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'));
|
||||
````
|
1
components/dropdown/index.jsx
Normal file
1
components/dropdown/index.jsx
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('rc-dropdown');
|
27
components/dropdown/index.md
Normal file
27
components/dropdown/index.md
Normal 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 属性
|
1
components/menu/index.jsx
Normal file
1
components/menu/index.jsx
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('rc-menu');
|
4
index.js
4
index.js
@ -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;
|
||||
|
@ -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"
|
||||
},
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user