Question

我的面板标题上有一个按钮。我想将它拉到面板标题的右侧。请有人告诉我

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

Answer 2

通过 Primeflex，您现在可以使用 p-jc-end 类：

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

在primeng面板小部件中拉动面板标题右侧的按钮

2 个答案: