在 Angular 中的 PrimeNg 中自定义 TabMenu 或 TabView

Question

描述：

我目前正在开发一个项目，我需要在 PrimeNg 中重新创建一个像 TabMenu/TabView 这样的小部件，但是我在每个按钮上使用不同的路由器链接并将其自定义为像图像一样或只是更加动态时遇到了麻烦。

我要创建的小部件：

详情：

框架/库：Angular、PrimeNg 问题：我想自定义 primeng 的 TabMenu/TabView 我想要的：我希望它占据视图宽度的 90%，并使其居中，并且每个选项卡的宽度与图像一样。 当前行为：描述当您应用自定义尝试时当前发生的情况。

HTML：

<div class="container "> 
   <p-tabMenu [model]="items"> 
</p-tabMenu> </div>

CSS：我尝试了很多方法，例如尝试编辑容器或从 prime ng 编辑这些标签 但我就是无法编辑它

Answer 1

我的问题是我把它放在里面了：

<div class="container "> </div>

解决方案是删除父div： HTML：

<p-tabMenu [model]="items" [activeItem]="activeItem"  (activeItemChange)="navigate($event)" >

CSS：

.p-tabmenu {
  border: none;
}
.p-tabmenu-nav {
  border: 1px white solid;
  margin-left: 5%;
  margin-right: 5%;
}
.p-tabmenuitem {
  width: 50%;
}
.p-menuitem-link {
  width: 100%;
  align-content: center;
  text-align: center;
}
.p-menuitem-link:active ,.p-menuitem-link:focus{
  width: 100%;
  align-content: center;
  text-align: center;
  border-bottom: 4px #127ae5 solid;
  border-radius: 5px;
}
.p-menuitem-text {
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
  color: #127ae5;
}

结果：