如何使用 PrimeNG 删除手风琴面板标题上的箭头图标？

Question

我只想使用PrimeNG从手风琴面板标题中删除箭头图标。有谁知道如何做到这一点？

代码：

<p-accordion>
  <p-accordionTab header="Godfather I">
   Content 1
 </p-accordionTab>
 <p-accordionTab header="Godfather II">
    Content 2
 </p-accordionTab>
 <p-accordionTab header="Godfather III">
    Content 3    
 </p-accordionTab>

这是一张图片：

Answer 1

给你p-accordion一个styleClass="someStyleClass"然后去你的根styles并添加这些：

.someStyleClass.ui-accordion .ui-accordion-header span.fa {
  display: none;
}

或者如果你使用 SCSS

.someStyleClass.ui-accordion {
  .ui-accordion-header {
    span.fa {
      display: none;
    }
  }
}

编辑：这是我个人能想到的最简单的解决方案，它不会弄乱源代码。

Answer 2

PrimeNG 中有一个属性，允许我们操纵手风琴的图标。

expandIcon和collapseIcon: 用于<p-accordion>标签。

我们可以使用类似的东西<p-accordion expandIcon = "" collapseIcon= "">，这应该像魅力一样发挥作用。

同样，当我们想要根据我们的需要更改图标时，可以使用它，例如“+”或“-”。

<p-accordion expandIcon = "pi pi-plus" collapseIcon = "pi pi-minus">

更多信息请访问https://www.primefaces.org/primeng/showcase/#/accordion

和平