primeng - 如何增加 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>

打字稿代码：

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

Answer 1

你只需要像这样更新加载元素的包装类

样式.css

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

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

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

模板

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

演示