【问题标题】:How to remove arrow icon on accordion panel headers using PrimeNG?如何使用 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 你会建议一种简单的方法来删除这些图标吗?谢谢

标签: css angular image typescript primeng


【解决方案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 中有一个属性,允许我们操作手风琴的图标。

    expandIconcollapseIcon:用于&lt;p-accordion&gt; 标签。

    我们可以使用 &lt;p-accordion expandIcon = "" collapseIcon= ""&gt; 之类的东西,这应该像一个魅力。

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

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

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

    和平

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-10-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多