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 28 Packages Projects Releases Wiki Activity

upgrade menu

Browse Source
This commit is contained in:
yiminghe 2015-08-10 17:57:28 +08:00
parent 3acb9d4eba
commit eef1da7ed6
9 changed files with 116 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
````jsx
var Menu = antd.Menu;
var Dropdown = antd.Dropdown;
var onClick = function (key){
var onClick = function ({key}){
alert('选中了菜单' + key);
};

41
components/menu/demo/inline.md Normal file
View File

@ -0,0 +1,41 @@
# 内嵌菜单
- order: 1
基本使用。
---
````jsx
var Menu = antd.Menu;
var MenuItem = Menu.Item;
var SubMenu = Menu.SubMenu;
function handleClick(info) {
console.log('selected ',info);
}
React.render(<Menu onClick={handleClick} style={{width:200}} mode="inline">
<SubMenu title={<span><i className="anticon anticon-apple"></i><span>导航一</span></span>}>
<MenuItem key="1">选项1</MenuItem>
<MenuItem key="2">选项2</MenuItem>
<MenuItem key="3">选项3</MenuItem>
<MenuItem key="4">选项4</MenuItem>
</SubMenu>
<SubMenu title={<span><i className="anticon anticon-apple"></i><span>导航二</span></span>}>
<MenuItem key="5">选项5</MenuItem>
<MenuItem key="6">选项6</MenuItem>
<SubMenu title={<span><i className="anticon anticon-apple"></i><span>三级导航</span></span>}>
<MenuItem key="7">选项7</MenuItem>
<MenuItem key="8">选项8</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu title={<span><i className="anticon anticon-apple"></i><span>导航三</span></span>}>
<MenuItem key="9">选项9</MenuItem>
<MenuItem key="10">选项10</MenuItem>
<MenuItem key="11">选项11</MenuItem>
<MenuItem key="12">选项12</MenuItem>
</SubMenu>
</Menu>
, document.getElementById('components-menu-demo-inline'));
````

16
components/menu/demo/nav.md
View File

@ -11,22 +11,18 @@ var Menu = antd.Menu;
var MenuItem = Menu.Item;
var SubMenu = Menu.SubMenu;
function handleClick(key) {
console.log('selected ' + key);
function handleClick(info) {
console.log('selected ', info);
}
var align={
points:['lt','lb']
};
React.render(<Menu onClick={handleClick} horizontal>
<SubMenu align={align} title={<span><i className="anticon anticon-apple"></i><span>导航一</span></span>}>
React.render(<Menu onClick={handleClick} mode="horizontal">
<SubMenu title={<span><i className="anticon anticon-apple"></i><span>导航一</span></span>}>
<MenuItem key="1">选项1</MenuItem>
<MenuItem key="2">选项2</MenuItem>
<MenuItem key="3">选项3</MenuItem>
<MenuItem key="4">选项4</MenuItem>
</SubMenu>
<SubMenu align={align} title={<span><i className="anticon anticon-apple"></i><span>导航二</span></span>}>
<SubMenu title={<span><i className="anticon anticon-apple"></i><span>导航二</span></span>}>
<MenuItem key="5">选项5</MenuItem>
<MenuItem key="6">选项6</MenuItem>
<SubMenu title={<span><i className="anticon anticon-apple"></i><span>三级导航</span></span>}>
@ -34,7 +30,7 @@ React.render(<Menu onClick={handleClick} horizontal>
<MenuItem key="8">选项8</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu align={align} title={<span><i className="anticon anticon-apple"></i><span>导航三</span></span>}>
<SubMenu title={<span><i className="anticon anticon-apple"></i><span>导航三</span></span>}>
<MenuItem key="9">选项9</MenuItem>
<MenuItem key="10">选项10</MenuItem>
<MenuItem key="11">选项11</MenuItem>

6
components/menu/demo/side.md
View File

@ -11,11 +11,11 @@ var Menu = antd.Menu;
var MenuItem = Menu.Item;
var SubMenu = Menu.SubMenu;
function handleClick(key) {
console.log('selected ' + key);
function handleClick(info) {
console.log('selected ',info);
}
React.render(<Menu onClick={handleClick} style={{width:200}} vertical>
React.render(<Menu onClick={handleClick} style={{width:200}} mode="vertical">
<SubMenu title={<span><i className="anticon anticon-apple"></i><span>导航一</span></span>}>
<MenuItem key="1">选项1</MenuItem>
<MenuItem key="2">选项2</MenuItem>

11
components/menu/index.md
View File

@ -26,13 +26,13 @@
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| horizontal | 是否横向菜单 | boolean | false |
| vertical | 是否侧向菜单 | boolean | false |
| mode | 菜单类型 | enum: 'vertical', 'horizontal', 'inline' | false |
| multiple | 支持多选 | | false |
| selectedKeys | 选中的菜单项 key 数组 | | |
| onSelect | 被选中时调用，参数为选中的 menuitem key 值 | function | 无 |
| onDeselect | 取消选中时调用，参数为选中的 menuitem key 值，仅在multiple生效 | function | 无 |
| onClick | 点击 menuitem 调用此函数，参数为点击的 menuitem key 值 | function | 无 |
| defaultSelectedKeys | 选中的菜单项 key 数组 | | |
| onSelect | 被选中时调用，参数 {item, key, selectedKeys} 对象 | function | 无 |
| onDeselect | 取消选中时调用，参数 {item, key, selectedKeys} 对象，仅在 multiple 生效 | function | 无 |
| onClick | 点击 menuitem 调用此函数，参数为 {item, key} | function | 无 |
| style | 根节点样式 | object | | |
### Menu.Item props
@ -47,5 +47,4 @@
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| title | 子菜单项值 | String or React.Element | |
| align | 子菜单的对齐配置 | object | {points:['lt','rt']} 弹出子菜单的 left top 和子菜单项的 right top 对齐 |
| children | (MenuItem or SubMenu)[] | 子菜单的菜单项 | | |

28
components/table/filterMenu.jsx
View File

@ -4,12 +4,12 @@ import Menu from 'rc-menu';
var FilterMenu = React.createClass({
getInitialState() {
return {
selectedFilters: this.props.selectedFilters
selectedKeys: this.props.selectedKeys
};
},
componentWillReceiveProps(nextProps){
this.setState({
selectedFilters: nextProps.selectedFilters
selectedKeys: nextProps.selectedKeys
});
},
getDefaultProps() {
@ -19,28 +19,18 @@ var FilterMenu = React.createClass({
column: null
};
},
handleSelectFilter: function (selected) {
setSelectedKeys: function ({selectedKeys}) {
this.setState({
selectedFilters: this.state.selectedFilters.concat(selected)
selectedKeys: selectedKeys
});
},
handleDeselectFilter: function (key) {
var index = this.state.selectedFilters.indexOf(key);
if (index !== -1) {
var selectedFilters = this.state.selectedFilters.concat();
selectedFilters.splice(index, 1);
this.setState({
selectedFilters: selectedFilters
});
}
},
handleClearFilters() {
this.setState({
selectedFilters: []
selectedKeys: []
});
},
handleConfirm(){
this.props.confirmFilter(this.props.column, this.state.selectedFilters);
this.props.confirmFilter(this.props.column, this.state.selectedKeys);
},
renderMenus(items) {
let menuItems = items.map((item) => {
@ -53,9 +43,9 @@ var FilterMenu = React.createClass({
return <Menu multiple={true}
prefixCls="ant-dropdown-menu"
className="ant-table-filter-dropdown"
onSelect={this.handleSelectFilter}
onDeselect={this.handleDeselectFilter}
selectedKeys={this.state.selectedFilters}>
onSelect={this.setSelectedKeys}
onDeselect={this.setSelectedKeys}
selectedKeys={this.state.selectedKeys}>
{this.renderMenus(column.filters)}
<Menu.Divider />
<Menu.Item disabled>

3
components/table/index.jsx
View File

@ -263,14 +263,13 @@ var AntTable = React.createClass({
if (column.filters && column.filters.length > 0) {
let colFilters = this.state.filters[key] || [];
menus = <FilterMenu column={column}
selectedFilters={colFilters}
selectedKeys={colFilters}
confirmFilter={this.handleFilter}/>;
let dropdownSelectedClass = '';
if (colFilters.length > 0) {
dropdownSelectedClass = 'ant-table-filter-selected';
}
filterDropdown = <Dropdown trigger="click"
closeOnSelect={false}
overlay={menus}>
<i title="筛选" className={'anticon anticon-bars ' + dropdownSelectedClass}></i>
</Dropdown>;

7
package.json
View File

@ -32,6 +32,7 @@
],
"license": "MIT",
"dependencies": {
"css-animation": "~1.1.0",
"enter-animation": "~0.2.5",
"gregorian-calendar": "~3.0.0",
"gregorian-calendar-format": "~3.0.1",
@ -41,15 +42,15 @@
"rc-checkbox": "~1.0.6",
"rc-collapse": "~1.2.3",
"rc-dialog": "~4.5.0",
"rc-dropdown": "~1.1.1",
"rc-dropdown": "~1.2.0",
"rc-form-validation": "~2.4.7",
"rc-input-number": "~2.0.1",
"rc-menu": "~3.5.0",
"rc-menu": "~4.0.3",
"rc-notification": "~1.1.0",
"rc-pagination": "~1.1.0",
"rc-progress": "~1.0.0",
"rc-radio": "~2.0.0",
"rc-select": "~4.5.2",
"rc-select": "~4.6.1",
"rc-slider": "~1.4.0",
"rc-steps": "~1.1.4",
"rc-switch": "~1.2.0",

55
style/components/menu.less
View File

@ -25,7 +25,16 @@
border-bottom: 1px solid #dedede;
}
&-item-active, &-submenu-active {
&-inline > &-item-active,
&-submenu-inline&-submenu-active,
&-submenu-inline&-submenu-active > &-submenu-title:hover {
background-color: #fff;
}
&-inline > &-item-active:hover,
&-item-active,
&-submenu-active,
&-submenu-inline&-submenu-active > &-submenu-title:hover {
background-color: #eaf8fe;
}
@ -37,19 +46,23 @@
padding: 0;
}
&-submenu-lt-lb > .@{menuPrefixCls} {
&-submenu-horizontal > .@{menuPrefixCls} {
top: 100%;
left: 0;
position: absolute;
min-width: 160px;
margin-top: 4px;
}
&-submenu-lt-rt > .@{menuPrefixCls} {
&-submenu-vertical > .@{menuPrefixCls} {
top: 0;
left: 100%;
position: absolute;
min-width: 160px;
margin-left: 4px;
}
&-item,&-submenu-title {
&-item, &-submenu-title {
margin: 0;
position: relative;
display: block;
@ -75,8 +88,6 @@
> .@{menuPrefixCls} {
display: none;
position: absolute;
min-width: 160px;
background-color: #fff;
}
@ -103,7 +114,7 @@
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
& > .@{menuPrefixCls}-item , & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
padding: 15px 20px;
}
@ -126,10 +137,36 @@
}
}
&-vertical {
&-vertical, &-inline {
padding: 12px 0;
& > .@{menuPrefixCls}-item , & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
padding: 12px 8px 12px 24px;
}
}
&-vertical&-sub {
padding: 0;
}
&-sub&-inline {
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
padding-top: 8px;
padding-bottom: 8px;
padding-right: 0;
}
}
}
.@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item {
.anticon {
width: 14px;
height: 14px;
margin-right: 8px;
top: -1px;
}
}