如何增加 PrimeNg loadingIcon 的大小

Question

在 PrimeNg Turbotable 中，我使用 loadingIcon 在加载数据时显示微调器。我无法增加 primeIcon pi-spinner 的大小。

HTML代码：

<p-table #resdt exportFilename="RecordChange"  [value]="recordList"  
      [(selection)]="selectedRecord" [loadingIcon]="loadingIcon" 
      [loading]="loading" sortField="recordCURD" sortMode="single" 
      [autoLayout]="true" scrollable="true" scrollHeight="550px">
....
</p-table>

TypeScript 代码：

this.loadingIcon = 'pi pi-spin pi-spinner';

Answer 1

您只需要像这样更新加载元素的包装器class

style.css

.ui-table .ui-table-loading-icon {
    font-size: 5em !important;
}

或者我们可以设置图标 class ，所以这可以简单地通过创建一个新的 class 来增加字体大小

.loading-icon-size { 
  font-size: 5em !important;
 }

模板

<p-table .... [loading]="loading" loadingIcon="
    pi pi-spin pi-spinner loading-icon-size ">
 .....
</table>

demo

如何增加 PrimeNg loadingIcon 的大小

How to increase the size of PrimeNg loadingIcon

primeng

primeng-turbotable

primeicons