如何将图标在primeng手风琴中从左移动到右?

huangapple go评论70阅读模式
英文:

How to move icon in primeng accordion from left to right?

问题

我想使用PrimeNg的手风琴,并希望折叠图标位于右侧,而不是左侧。我尝试操作iconPos属性,但无法使其对我起作用。有人能在这里给我建议吗?

<p-accordion [multiple]="true" [iconPos]="endVal">
   <p-accordionTab header="标题1">
       内容1
   </p-accordionTab>
   <p-accordionTab header="标题2">
       内容2
   </p-accordionTab>
   <p-accordionTab header="标题3">
       内容3    
   </p-accordionTab>
 </p-accordion>
英文:

I want to use an accordion from PrimeNg and I want collapse icon to be on the right side, not left. I tried to manipulate the iconPos attribute, but I cannot make it working for me. Can someone advise me here?

&lt;p-accordion [multiple]=&quot;true&quot; [iconPos]=&quot;endVal&quot;&gt; // endVal comes from ts and gets &quot;end&quot;
   &lt;p-accordionTab header=&quot;Header 1&quot;&gt;
       Content 1
   &lt;/p-accordionTab&gt;
   &lt;p-accordionTab header=&quot;Header 2&quot;&gt;
       Content 2
   &lt;/p-accordionTab&gt;
   &lt;p-accordionTab header=&quot;Header 3&quot;&gt;
       Content 3    
   &lt;/p-accordionTab&gt;
 &lt;/p-accordion&gt;

答案1

得分: 1

iconPos参数在PrimeNG 15.1.0中引入,请确保您至少运行此版本。

此外,由于这是您StackBlitz中的问题,请确保将参数绑定到属性,而不是字符串'endVal':

<!-- 在您的StackBlitz中 -->
<p-accordionTab header="Header I" [selected]="true" iconPos="endVal">
<!-- 应该是 -->
<p-accordionTab header="Header I" [selected]="true" [iconPos]="endVal">

演示

英文:

The iconPos parameter was introduced in PrimeNG 15.1.0, please make sure you're running at least this version.

Additionally, since this is a problem in your StackBlitz, please ensure you bind parameter to the property, not string 'endVal':

&lt;!-- in your StackBlitz --&gt;
&lt;p-accordionTab header=&quot;Header I&quot; [selected]=&quot;true&quot; iconPos=&quot;endVal&quot;&gt;
&lt;!-- should be --&gt;
&lt;p-accordionTab header=&quot;Header I&quot; [selected]=&quot;true&quot; [iconPos]=&quot;endVal&quot;&gt;

Demo

huangapple
  • 本文由 发表于 2023年3月21日 00:23:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/75792850.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定