Question

我在我的有角度的项目中使用了PrimeNg，但找不到让菜单切换开关消失的简单解决方案。我先解释一下我的第一张照片，然后再解释我想要的。我们去吧

我要根据您的评论添加一些代码段，希望它比图像更有用。

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);
}

Answer 1

添加此CSS即可删除菜单切换器

::ng-deep .ui-panelmenu-icon {
    display: none;
}

如何使菜单切换器在PrimeNg中消失

1 个答案: