如何在Angular 18的PrimeNG TabView标签间添加竖线

要给Angular 18里PrimeNG的p-tabView标签头加上竖线分隔，直接用CSS就能搞定，不用改组件逻辑，两种常用方法供你选：

方法一：使用边框实现竖线 #

这种方式用边框做分隔线，视觉上更贴合标签高度，适合需要和标签等高的竖线效果。在全局样式文件（比如styles.css）里加这段代码：

/* 给除最后一个标签外的所有标签头部加右边框 */
.p-tabview .p-tabview-nav .p-tabview-tab:not(:last-child) .p-tabview-nav-link {
  border-right: 1px solid #ccc; /* 颜色可根据主题色调整 */
  padding-right: 1.2rem; /* 调整右边内边距，让竖线和文字保持距离 */
}

/* 统一所有标签头部的左边内边距，保证布局一致 */
.p-tabview .p-tabview-nav .p-tabview-tab .p-tabview-nav-link {
  padding-left: 1.2rem;
}

方法二：插入|字符作为分隔 #

如果想要直接显示|符号作为分隔，用伪元素插入内容即可，同样在全局样式文件添加：

/* 给除最后一个标签外的所有标签后面插入|字符 */
.p-tabview .p-tabview-nav .p-tabview-tab:not(:last-child)::after {
  content: "|";
  color: #ccc; /* 字符颜色按需调整 */
  margin: 0 0.8rem; /* 调整左右间距，避免和文字挤在一起 */
}

两种方法都不需要修改你现有的p-tabView组件代码，直接加CSS就能实现你要的效果。

内容的提问来源于stack exchange，提问作者Nandhakumar S