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

Posted 2023-03-13

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

【英文标题】：How to remove arrow icon on accordion panel headers using PrimeNG?

【发布时间】：2018-06-13 10:16:19

【问题描述】：

我只想使用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>

这是一张图片：

【问题讨论】：

源代码具有硬编码，因此您可以提交拉取请求或修改源代码以适应您的情况。编辑：我提交了可自定义图标的 PR，但尚未合并。

@ChauTran 你会建议一种简单的方法来删除这些图标吗？谢谢

【参考方案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;
    
  

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

【参考方案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

和平