Изменение вкладок в разные цвета одним щелчком мыши в TabMenu в PrimeNG - PullRequest
0 голосов
/ 28 апреля 2020

Компонент выглядит следующим образом:

constructor() { }

  items3: MenuItem[];

    ngOnInit() {

        this.items3 = [
          {label: 'Info', icon: 'pi pi-fw pi-chart-bar', routerLink:['/info']},
          {label: 'Message', icon: 'pi pi-fw pi-calendar', routerLink:['/message']}
      ];

    }
}    

Код HTML выглядит следующим образом:

<h3>Router Outlet</h3>
<p-tabMenu [model]="items3">
</p-tabMenu>
<div style="padding: 0.5em;">
    <router-outlet></router-outlet>
</div>

Я добавил следующие стили в глобальных стилях. css:

styles.css:

.my-tab .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem .ui-state-active {
    background-color: darkgrey;
    border: 0px solid darkgray;

}

/* .my-tab li.ui-state-active{
  border-color: grey !important;
}

.my-tab a.ui-state-active{
  color: grey !important;
}  */

 /* .my-tab .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-active:focus {
   outline: 0;
   background-color: darkgrey;
    border: 0px solid darkgray;

} */


.my-tab .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem {
    position: static;
    background-color: #f4f4f4;
    margin-right: -2px;
    padding-right: 0px;
}

.my-tab .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem .ui-state-active {
    background-color: darkgray;
    border: 0px solid darkgray;
    border-color: darkgray;
}

.my-tab .ui-tabmenu .ui-tabmenu-nav {
    padding: 0;
    border-bottom: 0px solid #c8c8c8; 
    outline-color: white;
} 

.my-tab.ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem {
    list-style: none;
    float: left;
    position: relative;
    margin: 0 .2em 1px -3px;
}

Я пытаюсь добавить подсветку одним кликом для всех вкладок в TabMenu в primeNG. Это похоже на ошибку в PrimeNG. Первая вкладка выделяется синим цветом, когда она активна при первой загрузке страницы. Последующие вкладки не выделяются и остаются выделенными, когда я нажимаю на них. Это ошибка в PrimeNG. Мне нужно, чтобы вкладки выделялись одним щелчком мыши до тех пор, пока не будет нажата следующая вкладка.

Кто-нибудь может предложить решение для этого? Спасибо за преимущество.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...