在 primeng 面板小部件中将按钮拉到面板右侧 header

Question

我的面板上有一个 prime ng 按钮 header。我想把它拉到面板的右边 header。有人可以告诉我吗

  <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>

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

Answer 1

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

所以你可以做常规的 CSS.

而不是 [style]="..."

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

或者，如果您不想要内联样式，您可以这样做

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

您必须记住，虽然 PrimeNG 为您做了很多工作，但它只是 javascript/typescript 和 HTML/CSS 在引擎盖下。您仍然可以对它们进行基本的 CSS 样式设置。我肯定不得不对 trim 向下按钮这样做，因为它们使用了太多屏幕 space IMO。

Answer 2

有了 Primeflex，您现在可以使用 p-jc-end class：

<p-button class="p-grid p-jc-end" [routerLink]="..." [icon]="..." [label]="...">

在 primeng 面板小部件中将按钮拉到面板右侧 header

Pull button to the right of the panel header in primeng panel widget

html

css

primeng