mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-30 22:39:34 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

Improve Menu selected design

Browse Source
This commit is contained in:
afc163 2016-12-04 19:26:11 +08:00
parent ca1f16556c
commit 99df18139b
3 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/menu/demo/theme.md
View File

@ -20,7 +20,8 @@ const SubMenu = Menu.SubMenu;
const Sider = React.createClass({ const Sider = React.createClass({
getInitialState() { getInitialState() {
return { return {
theme: 'light', theme: 'dark',
current: '1',
}; };
}, },
changeTheme(value) { changeTheme(value) {
@ -37,10 +38,16 @@ const Sider = React.createClass({
render() { render() {
return ( return (
<div> <div>
<Switch onChange={this.changeTheme} checkedChildren="Dark" unCheckedChildren="Light" /> <Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br /> <br />
<br /> <br />
<Menu theme={this.state.theme} <Menu
theme={this.state.theme}
onClick={this.handleClick} onClick={this.handleClick}
style={{ width: 240 }} style={{ width: 240 }}
defaultOpenKeys={['sub1']} defaultOpenKeys={['sub1']}

8
components/menu/style/index.less
View File

@ -72,7 +72,7 @@
&-item-active, &-item-active,
&-submenu-active, &-submenu-active,
&-submenu-title:hover { &-submenu-title:hover {
background-color: tint(@primary-color, 90%); color: @primary-color;
} }
&-horizontal &-item, &-horizontal &-item,
@ -96,6 +96,10 @@
} }
} }
&:not(&-horizontal) &-item-selected {
background-color: tint(@primary-color, 90%);
}
&-horizontal, &-horizontal,
&-inline, &-inline,
&-vertical { &-vertical {
@ -124,7 +128,7 @@
&-inline { &-inline {
.@{menu-prefix-cls}-selected, .@{menu-prefix-cls}-selected,
.@{menu-prefix-cls}-item-selected { .@{menu-prefix-cls}-item-selected {
border-right: 2px solid @primary-color; border-right: 3px solid @primary-color;
transform: translateZ(0); transform: translateZ(0);
} }
} }

13
tests/menu/__snapshots__/demo.test.js.snap
View File

@ -353,23 +353,24 @@ exports[`test renders ./components/menu/demo/switch-mode.md correctly 1`] = `
exports[`test renders ./components/menu/demo/theme.md correctly 1`] = ` exports[`test renders ./components/menu/demo/theme.md correctly 1`] = `
<div> <div>
<span <span
class="ant-switch" checked=""
class="ant-switch ant-switch-checked"
tabindex="0"> tabindex="0">
<span <span
class="ant-switch-inner"> class="ant-switch-inner">
Light Dark
</span> </span>
</span> </span>
<br /> <br />
<br /> <br />
<ul <ul
aria-activedescendant="" aria-activedescendant=""
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root" class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
role="menu" role="menu"
style="width:240px;" style="width:240px;"
tabindex="0"> tabindex="0">
<li <li
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu"> class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu">
<div <div
aria-expanded="true" aria-expanded="true"
aria-haspopup="true" aria-haspopup="true"
@ -390,8 +391,8 @@ exports[`test renders ./components/menu/demo/theme.md correctly 1`] = `
id="sub1$Menu" id="sub1$Menu"
role="menu"> role="menu">
<li <li
aria-selected="false" aria-selected="true"
class="ant-menu-item" class="ant-menu-item-selected ant-menu-item"
role="menuitem" role="menuitem"
style="padding-left:48px;"> style="padding-left:48px;">
Option 1 Option 1