Как сделать так, чтобы меню исчезло в PrimeNg - PullRequest
Новая
       16

Как сделать так, чтобы меню исчезло в PrimeNg

0 голосов
/ 22 марта 2019

Я использую 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);
}

1 Ответ

1 голос
/ 22 марта 2019

Добавьте эту CSS для удаления переключателя меню 

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