我在我的角度项目中使用了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;
}

09-20 21:31