diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md new file mode 100644 index 0000000000..841d9f86b8 --- /dev/null +++ b/components/dropdown/demo/sub-menu.md @@ -0,0 +1,29 @@ +# 多级菜单 + +- order: 5 + +传入的菜单里有多个层级。 + +--- + +````jsx +import { Menu, Dropdown, Icon } from 'antd'; +const SubMenu = Menu.SubMenu; + +const menu = + 第一个菜单项 + 第二个菜单项 + + 第三个菜单项 + 第四个菜单项 + +; + +ReactDOM.render( + + + 多级菜单 + + +, mountNode); +```` diff --git a/style/components/dropdown.less b/style/components/dropdown.less index 3aab30681a..87e940a718 100644 --- a/style/components/dropdown.less +++ b/style/components/dropdown.less @@ -30,7 +30,8 @@ } } - &-hidden { + &-hidden, + &-menu-hidden { display: none; } @@ -46,15 +47,11 @@ box-shadow: @box-shadow-base; background-clip: padding-box; border: 1px solid @border-color-base; - overflow: hidden; - > li { - margin: 0; - padding: 0; - } - - & > &-item { + &-item, + &-submenu-title { padding: 7px 15px; + margin: 0; clear: both; font-size: 12px; font-weight: normal; @@ -86,14 +83,12 @@ } } - &:last-child { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; + &:first-child { + border-radius: @border-radius-base @border-radius-base 0 0; } - &:first-child { - border-top-left-radius: 3px; - border-top-right-radius: 3px; + &:last-child { + border-radius: 0 0 @border-radius-base @border-radius-base; } &-divider { @@ -103,6 +98,35 @@ line-height: 0; } } + + &-submenu-title:after { + font-family: "anticon" !important; + position: absolute; + content: "\e600"; + right: 15px; + color: #999; + .iconfont-size-under-12px(8px); + } + + &-submenu-vertical { + position: relative; + } + + &-submenu-vertical > & { + top: 0; + left: 100%; + position: absolute; + min-width: 100%; + margin-left: 4px; + } + + &-submenu:first-child &-submenu-title { + border-radius: @border-radius-base @border-radius-base 0 0; + } + + &-submenu:last-child &-submenu-title { + border-radius: 0 0 @border-radius-base @border-radius-base; + } } &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,