如何将 PrimeNG 中的 p-checkbox 标签放在复选框的左侧

Question

 <p-checkbox name="group1" [value]="true" label="Outsourcing"
                             style="margin: 0 25px"></p-checkbox>

默认情况下，标签位于复选框的右侧，如何将其更改为左侧？

Answer 1

您可以通过在p-checkbox元素中将row-direction样式属性设置为row-reverse来实现这一点。

<p-checkbox 
  name="group1" 
  [value]="true" 
  label="Outsourcing" 
  style="margin: 0 25px; flex-direction: row-reverse">
</p-checkbox>

工作示例： https : //stackblitz.com/edit/angular-ivy-drzmxl?file=src/app/app.component.html