Компонент выглядит следующим образом:
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. Мне нужно, чтобы вкладки выделялись одним щелчком мыши до тех пор, пока не будет нажата следующая вкладка.
Кто-нибудь может предложить решение для этого? Спасибо за преимущество.