我在我的角度项目中使用了PrimeNg,但找不到一个简单的解决方案来使菜单切换开关消失。我先解释一下我的第一张照片,然后再解释我想要的。我们走吧:
First picture
Second picture
我根据您的评论的家伙添加了一些代码片段,我希望它比图像更有用。
HTML:
...
<p-panelMenu class="global-navigation-menu" [model]="items" [multiple]="false"></p-panelMenu>
...
TS:
...
this.items =
[
{ separator: true },
{
label: 'Dashboard', icon: 'pi pi-fw pi-globe', items: [
{
label: 'Projects', icon: 'pi pi-fw pi-bars', items: [
{
label: 'Mock project', items: [
{ label: 'Version 1' }
]
},
{ label: 'Empty project' }
]
}
]
}
];
...
CSS(整个):
:host {
::ng-deep .ui-panelmenu-header > a {
border: none!important;
background-color: transparent!important;
color: #ffffff!important;
}
.ui-panelmenu-icon {
color: #ffffff!important;
}
::ng-deep .ui-panelmenu-content {
border: none!important;
background-color: transparent!important;
color: #ffffff;
}
::ng-deep .ui-menuitem-text {
color: #ffffff!important;
font-size: 14px;
}
::ng-deep .ui-menuitem-icon {
color: #ffffff;
}
::ng-deep .ng-star-inserted:before {
color: #ffffff;
}
::ng-deep .pi-chevron-right:before {
color: #ffffff;
}
::ng-deep .ng-star-inserted{
background-color: transparent!important;
color: #ffffff;
}
::ng-deep .ng-menu-link{
color: #ffffff!important;
}
::ng-deep .ui-sidebar-mask{
background-color: transparent;
}
::ng-deep .ui-button-icon-only{
border: none!important;
// background-color: transparent!important;
}
::ng-deep .ng-reflect-ng-class{
z-index: 0!important;
}
::ng-deep .ui-sidebar-active{
border: none!important;
background-color: transparent!important;
box-shadow: none!important;
width: 272px!important;
}
::ng-deep .ui-sidebar-left{
border: none!important;
background-color: transparent!important;
}
::ng-deep .ui-sidebar{
border: none!important;
background-color: transparent!important;
}
::ng-deep .ui-button-icon-only{
border: none!important;
background-color: transparent!important;
}
}
.sidebar-button
{
margin-left: 230px;
margin-top: 4px;
}
.sidebar
{
margin-top: 86px;
width: calc(100vh - 86px);
}
.global-logotype-graphics
{
position: absolute;
width: 100%;
bottom: 0px;
right: 0px;
}
.global-navigation-menu
{
position: relative;
top: 6px;
}
.global-navigation-menu-small
{
position: relative;
}
.global-pegasus-graphics
{
position: absolute;
width: 74%;
right: 13%;
left: 13%;
bottom: 10%;
}
.navigation
{
position: relative;
height: calc(100vh - 86px);
width: 272px;
margin-top: calc(86px - 8px);
margin-left: -16px;
background-image: linear-gradient(#33435B, #0076BB);
}
.navigation-small
{
position: relative;
height: calc(100vh - 86px);
width: 62px;
margin-top: 0px;
margin-left: -8px;
background-image: linear-gradient(#33435B, #0076BB);
}
最佳答案
添加此CSS以删除菜单切换器
::ng-deep .ui-panelmenu-icon {
display: none;
}