mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 13:47:02 +08:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Merge pull request #131 from ant-design/improve-menu

Browse Source 
改进 menu 的样式
This commit is contained in:
偏右 2015-08-14 18:19:34 +08:00
commit 079220be80
8 changed files with 173 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/menu/demo/horizontal.md Normal file
View File

@ -0,0 +1,44 @@
# 顶部导航
- order: 0
水平的顶部导航菜单。
---
````jsx
var Menu = antd.Menu;
var SubMenu = Menu.SubMenu;
var App = React.createClass({
getInitialState() {
return {
current: 'mail'
}
},
handleClick(item) {
console.log('click ', item);
this.setState({
current: item.key
});
},
render() {
return <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
<Menu.Item key="mail">
<i className="anticon anticon-mail"></i>导航一
</Menu.Item>
<Menu.Item key="app">
<i className="anticon anticon-large"></i>导航二
</Menu.Item>
<SubMenu title={<span><i className="anticon anticon-setting"></i>导航三（子菜单）</span>}>
<Menu.Item key="setting:1">选项1</Menu.Item>
<Menu.Item key="setting:2">选项2</Menu.Item>
<Menu.Item key="setting:3">选项3</Menu.Item>
<Menu.Item key="setting:4">选项4</Menu.Item>
</SubMenu>
</Menu>
}
});
React.render(<App />, document.getElementById('components-menu-demo-horizontal'));
````

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

@ -1,41 +0,0 @@
# 内嵌菜单
- 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 key="sub1" 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 key="sub2" title={<span><i className="anticon anticon-apple"></i><span>导航二</span></span>}>
<MenuItem key="5">选项5</MenuItem>
<MenuItem key="6">选项6</MenuItem>
<SubMenu key="sub3" title={<span><i className="anticon anticon-apple"></i><span>三级导航</span></span>}>
<MenuItem key="7">选项7</MenuItem>
<MenuItem key="8">选项8</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" 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'));
````

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

@ -1,41 +0,0 @@
# 导航菜单
- order: 0
基本使用。
---
````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} mode="horizontal">
<SubMenu key="sub1" 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 key="sub2" title={<span><i className="anticon anticon-apple"></i><span>导航二</span></span>}>
<MenuItem key="5">选项5</MenuItem>
<MenuItem key="6">选项6</MenuItem>
<SubMenu key="sub3" title={<span><i className="anticon anticon-apple"></i><span>三级导航</span></span>}>
<MenuItem key="7">选项7</MenuItem>
<MenuItem key="8">选项8</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" 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-nav'));
````

54
components/menu/demo/sider.md Normal file
View File

@ -0,0 +1,54 @@
# 内嵌菜单
- order: 1
垂直菜单，子菜单内嵌在菜单区域。
---
````jsx
var Menu = antd.Menu;
var SubMenu = Menu.SubMenu;
var Sider = React.createClass({
getInitialState() {
return {
current: 'mail'
}
},
handleClick(item) {
console.log('click ', item);
this.setState({
current: item.key
});
},
render() {
return <Menu onClick={this.handleClick}
style={{width:240}}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><i className="anticon anticon-large"></i><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>;
}
});
React.render(<Sider />, document.getElementById('components-menu-demo-sider'));
````

41
components/menu/demo/system.md
View File

@ -1,41 +0,0 @@
# 系统菜单
- 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} mode="horizontal" openSubMenuOnMouseEnter={false} closeSubMenuOnMouseLeave={false}>
<SubMenu key="sub1" 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 key="sub2" title={<span><i className="anticon anticon-apple"></i><span>导航二</span></span>}>
<MenuItem key="5">选项5</MenuItem>
<MenuItem key="6">选项6</MenuItem>
<SubMenu key="sub3" title={<span><i className="anticon anticon-apple"></i><span>三级导航</span></span>}>
<MenuItem key="7">选项7</MenuItem>
<MenuItem key="8">选项8</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" 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-system'));
````

30
components/menu/demo/side.md → components/menu/demo/vertical.md
View File

@ -1,8 +1,8 @@
# 侧边菜单
# 垂直菜单
- order: 1
- order: 2
基本使用。
子菜单是弹出的形式。
---
@ -11,31 +11,31 @@ var Menu = antd.Menu;
var MenuItem = Menu.Item;
var SubMenu = Menu.SubMenu;
function handleClick(info) {
console.log('selected ',info);
function handleClick(item) {
console.log('click', item);
}
React.render(<Menu onClick={handleClick} style={{width:200}} mode="vertical">
<SubMenu key="sub1" title={<span><i className="anticon anticon-apple"></i><span>导航一</span></span>}>
React.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
<SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></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 key="sub2" title={<span><i className="anticon anticon-apple"></i><span>导航二</span></span>}>
<SubMenu key="sub2" title={<span><i className="anticon anticon-large"></i><span>导航二</span></span>}>
<MenuItem key="5">选项5</MenuItem>
<MenuItem key="6">选项6</MenuItem>
<SubMenu key="sub3" title={<span><i className="anticon anticon-apple"></i><span>三级导航</span></span>}>
<MenuItem key="7">选项7</MenuItem>
<MenuItem key="8">选项8</MenuItem>
</SubMenu>
<SubMenu key="sub3" title="三级导航">
<MenuItem key="7">选项7</MenuItem>
<MenuItem key="8">选项8</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><i className="anticon anticon-apple"></i><span>导航三</span></span>}>
<SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></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-side'));
</Menu>
, document.getElementById('components-menu-demo-vertical'));
````

1
components/menu/index.md
View File

@ -2,6 +2,7 @@
- category: Components
- chinese: 导航菜单
- cols: 1
---

85
style/components/menu.less
View File

@ -1,5 +1,3 @@
@import "../mixins/index";
@menuPrefixCls: ~"@{css-prefix}menu";
.@{menuPrefixCls} {
@ -7,11 +5,11 @@
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
z-index: 99999;
z-index: 1001;
border: 1px solid #d9d9d9;
box-shadow: 0 0 4px #d9d9d9;
border-radius: 3px;
color: #666;
box-shadow: @overlay-shadow;
border-radius: @border-radius-base;
color: @text-color;
&-item-group-list {
margin: 0;
@ -25,6 +23,11 @@
border-bottom: 1px solid #dedede;
}
&-item {
cursor: pointer;
transition: all 0.3s ease;
}
&-inline > &-item-active,
&-submenu-inline&-submenu-active,
&-submenu-inline&-submenu-active > &-submenu-title:hover {
@ -40,18 +43,20 @@
&-item-selected {
background-color: tint(@primary-color, 90%);
color: @primary-color;
}
& > li&-submenu {
padding: 0;
cursor: pointer;
}
&-submenu-horizontal > .@{menuPrefixCls} {
top: 100%;
left: 0;
position: absolute;
min-width: 160px;
margin-top: 4px;
min-width: 100%;
margin-top: 7px;
}
&-submenu-vertical > .@{menuPrefixCls} {
@ -66,12 +71,11 @@
margin: 0;
position: relative;
display: block;
padding: 7px 7px 7px 16px;
white-space: nowrap;
// Disabled state sets text to gray and nukes hover/tab effects
&.@{menuPrefixCls}-item-disabled, &.@{menuPrefixCls}-submenu-disabled {
color: #777 !important;
color: #999 !important;
}
}
& > &-item-divider {
@ -91,6 +95,21 @@
background-color: #fff;
}
&-vertical > .@{menuPrefixCls}-submenu-title:after {
font-family: "anticon" !important;
font-style: normal;
vertical-align: baseline;
text-align: center;
text-transform: none;
text-rendering: auto;
position: absolute;
transition: transform .3s ease;
content: "\e600";
right: 16px;
.ie-rotate(3);
transform: rotate(270deg) scale(0.75);
}
&-inline > .@{menuPrefixCls}-submenu-title:after {
font-family: "anticon" !important;
font-style: normal;
@ -99,22 +118,19 @@
text-transform: none;
text-rendering: auto;
position: absolute;
transition: transform .3s ease-in;
transition: transform .3s ease;
content: "\e600";
right: 8px;
transform: scale(0.7);
top: 11px;
right: 16px;
.iconfont-size-under-12px(8px);
}
&-open {
> .@{menuPrefixCls} {
display: block;
}
&.@{menuPrefixCls}-submenu-inline > .@{menuPrefixCls}-submenu-title:after {
content: "\e600";
.ie-rotate(2);
transform: rotate(180deg) scale(0.7);
transform: rotate(180deg) scale(0.75);
}
}
}
@ -125,28 +141,39 @@
height: 14px;
margin-right: 8px;
top: -1px;
color: #999;
}
}
&-horizontal {
background-color: #F3F5F7;
background-color: #FBFBFB;
border: none;
border-bottom: 1px solid transparent;
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
border-radius: 0;
padding-left: 24px;
z-index: 0;
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
& > .@{menuPrefixCls}-item,
& > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
padding: 15px 20px;
position: relative;
top: 1px;
}
& > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item {
float: left;
border-bottom: 2px solid transparent;
margin-right: 24px;
&-active {
&-active,
&-selected {
border-bottom: 2px solid @primary-color;
background-color: #F3F5F7;
background-color: #FBFBFB;
color: @primary-color;
.anticon {
color: @primary-color;
}
}
}
@ -161,7 +188,10 @@
&-vertical, &-inline {
padding: 12px 0;
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
padding: 12px 8px 12px 24px;
padding: 0 24px;
font-size: 12px;
line-height: 42px;
height: 42px;
}
}
@ -169,8 +199,10 @@
padding: 0;
}
&-root&-vertical,
&-root&-inline {
border-radius: 0;
box-shadow: none;
}
&-sub&-inline {
@ -180,9 +212,10 @@
box-shadow: none;
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
padding-top: 8px;
padding-bottom: 8px;
padding-right: 0;
line-height: 34px;
height: 34px;
list-style-type: disc;
list-style-position: inside;
}
}
}