如何将PrimeNG Accordion的折叠图标从左侧移至右侧？

问题根源 #

你把iconPos属性加在了<p-accordion>容器标签上，但PrimeNG中这个属性是专属<p-accordionTab>标签的，容器本身不支持该属性，所以设置后不会生效。

正确实现方案 #

方案1：在Tab标签上设置iconPos #

将iconPos移到每个<p-accordionTab>上，可直接写死值或绑定TS变量：

<p-accordion [multiple]="true">
   <p-accordionTab header="Header 1" iconPos="end">
       Content 1
   </p-accordionTab>
   <p-accordionTab header="Header 2" [iconPos]="endVal"> <!-- 绑定TS中的endVal变量 -->
       Content 2
   </p-accordionTab>
   <p-accordionTab header="Header 3" iconPos="end">
       Content 3    
   </p-accordionTab>
</p-accordion>

TS中保持endVal = "end"的定义即可。

方案2：CSS强制调整（兼容旧版本） #

如果你的PrimeNG版本较低（比如低于14.x）不支持iconPos属性，可通过CSS手动调整图标位置：

/* 把折叠图标容器推到右侧 */
.p-accordion-header .p-accordion-header-icon {
    order: 2;
    margin-left: auto;
}
/* 确保标题文本保持在左侧 */
.p-accordion-header .p-accordion-header-text {
    order: 1;
}

如果使用了自定义头部模板，需要根据实际DOM结构微调CSS选择器。

额外提示 #

• 优先确认PrimeNG版本：iconPos属性是在较新版本中引入的，建议升级到最新稳定版避免兼容性问题。
• 若使用了自定义主题，可在CSS选择器前加上组件的类名（比如你的组件类app-accordion），提升样式优先级避免被主题覆盖。

内容的提问来源于stack exchange，提问作者user18974278