Infragistics｜Ignite UI for Angular｜將樣式應用於 IgxGrid 列標題

[orca_post_views] 瀏覽人次

2023-08-06 更新

可以使用 IgxGrid 的 IgxColumn 公開的 headerClass 來設置列標題的樣式。

 <igx-grid #grid1 [data]=“data” width=“700px” 

   height=“300px” displayDensity=“compact”> 

   <igx-column field=“Id” header=“ID”></igx-column> 

   <igx-column field=“Name” header=“商品名” 

     headerClasses=“name-column-header”></igx-column> 

   <igx-column field=“Price” header=“価格”></igx-column> 

   <igx-column field=“RegisteredDate” header=“登録日”> 

     <ng-template igxCell let-val> 

      {{val | date:’yyyy/MM/dd’}}

     </ng-template> 

   </igx-column> 

   <igx-column field=“IsActive” header=“アクティブ”></igx-column> 

 </igx-grid> 

 ::ng-deep { 

   .name-column-header .igx-grid__th-title { 

     color: red; 

     text-decoration: underline; 

}

}

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴，歡迎諮詢你需要的軟體服務！

群昱作為全球知名軟體推薦合作夥伴，致力於提供更多軟體解決方案給你！