如何使用 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 的更多信息

和平