html - 在 primeng 面板小部件中将按钮拉到面板标题的右侧

Question

我的面板标题上有一个 prime ng 按钮。我想将它拉到面板标题的右侧。谁能告诉我

  <p-header>
    <h4>Data View</h4>
    <button pButton type="button" [style]="{'float':'right'}" label="New Data" icon="fa-plus" (click)="createData()" class="ui-button-danger"></button>
  </p-header>

按钮似乎也没有样式类，有没有办法为 primeng 按钮小部件指定一个 css 类？

Answer 1

您可以使用纯 HTML/CSS 类型样式。

因此，您可以使用常规 CSS 而不是使用 [style]="..."。

<button pButton type="button" style="float: right;" ....</button>

或者如果你不想要内联样式，你可以做类似的事情

.my-button {
    float: right;
    ....
}

您必须记住，虽然 PrimeNG 为您做了很多工作，但它只是底层的 javascript/typescript 和 HTML/CSS。您仍然可以对它们进行基本的 CSS 样式设置。我肯定不得不这样做来减少按钮，因为它们占用了太多屏幕空间 IMO。