baha/skyline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Fix menu items name is too long

Browse Source 
Show elipsis if menu items name is too long

Change-Id: I7ea77c0c27a281c0b84da6e53df82e2ad0195766
This commit is contained in:
xusongfu 2021-09-23 15:36:21 +08:00
parent 3109d9bc98
commit 7353c91f61
2 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/layouts/Base/Menu.jsx
View File

@ -13,7 +13,7 @@
// limitations under the License. // limitations under the License.
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Menu } from 'antd'; import { Menu, Tooltip } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'; import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { inject, observer } from 'mobx-react'; import { inject, observer } from 'mobx-react';
@ -110,7 +110,13 @@ export class LayoutMenu extends Component {
{item.icon} {item.icon}
<span> <span>
<Link key={item.key} to={item.path}> <Link key={item.key} to={item.path}>
{item.name.length > 15 ? (
<Tooltip title={item.name} placement="right">
{item.name} {item.name}
</Tooltip>
) : (
item.name
)}
</Link> </Link>
</span> </span>
</Menu.Item> </Menu.Item>
@ -119,7 +125,15 @@ export class LayoutMenu extends Component {
const title = ( const title = (
<span> <span>
{item.icon} {item.icon}
<span>{item.name}</span> <span>
{item.name.length > 15 ? (
<Tooltip title={item.name} placement="right">
{item.name}
</Tooltip>
) : (
item.name
)}
</span>
</span> </span>
); );
const subMenuItems = item.children.map((it) => this.renderMenuItem(it)); const subMenuItems = item.children.map((it) => this.renderMenuItem(it));

23
src/layouts/Base/index.less
View File

@ -1,4 +1,4 @@
@import "~styles/variables"; @import '~styles/variables';
.nav { .nav {
left: -(@nav-width + 10px); left: -(@nav-width + 10px);
@ -115,6 +115,9 @@
a { a {
color: inherit; color: inherit;
} }
a::before {
width: 5px;
}
} }
} }
@ -137,6 +140,9 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
color: transparent; color: transparent;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} }
.ant-menu-item > span > a::before { .ant-menu-item > span > a::before {
@ -144,7 +150,7 @@
top: 18px; top: 18px;
bottom: 0; bottom: 0;
left: 30px; left: 30px;
content: ""; content: '';
width: 5px; width: 5px;
height: 5px; height: 5px;
background-color: rgba(255, 255, 255, 0.65); background-color: rgba(255, 255, 255, 0.65);
@ -164,7 +170,8 @@
// background-color: transparent !important; // background-color: transparent !important;
// } // }
// } // }
.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected { .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal)
.ant-menu-item-selected {
background-color: @primary-color; background-color: @primary-color;
border-radius: @border-radius; border-radius: @border-radius;
} }
@ -227,7 +234,7 @@
} }
.trigger::before { .trigger::before {
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -294,7 +301,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
color: #0068FF; color: #0068ff;
position: absolute; position: absolute;
top: 48px; top: 48px;
right: 0; right: 0;
@ -309,6 +316,8 @@
word-wrap: break-word; word-wrap: break-word;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
} }