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

feat: prevent horizontal menu items wrapping

Browse Source
This commit is contained in:
picodoth 2018-07-11 12:07:17 +08:00 committed by 陈帅
parent 125d0df3e0
commit 5c7f9feecb
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/menu/demo/horizontal.md
View File

@ -37,6 +37,7 @@ class App extends React.Component {
onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="horizontal"
triggerSubMenuAction="click"
>
<Menu.Item key="mail">
<Icon type="mail" />Navigation One
@ -44,7 +45,7 @@ class App extends React.Component {
<Menu.Item key="app" disabled>
<Icon type="appstore" />Navigation Two
</Menu.Item>
<SubMenu title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
<SubMenu title={<span className="submenu-title-wrapper"><Icon type="setting" />Navigation Three - Submenu</span>}>
<MenuItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>

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

@ -179,6 +179,10 @@
position: absolute;
border-radius: @border-radius-base;
z-index: @zindex-dropdown;
.submenu-title-wrapper {
padding-right: 20px;
}
}
> .@{menu-prefix-cls} {
@ -262,12 +266,13 @@
border-bottom: @border-width-base @border-style-base @border-color-split;
box-shadow: none;
line-height: 46px;
white-space: nowrap;
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu {
position: relative;
top: 1px;
float: left;
display: inline-block;
border-bottom: 2px solid transparent;
&:hover,