Infragistics｜Ignite UI for Angular｜如何在 IgxGrid 單元格上繪製邊框

如果您想在 IgxGrid 單元格上繪製邊框，請使用 CSS 在每個 DOM 元素上設置邊框。這裡我們將解釋如何定制IgxGrid的默認主題。

/* styles.scss */ @import '~igniteui-angular/lib/core/styles/themes/index'; @include igx-core();  /* 枠線用のCSS変数 */ $my-border-color: black; $my-border: 1px solid $my-border-color;  /* カスタムテーマの作成 */ $custom-theme: igx-grid-theme(     $header-border-color: $my-border-color,     $row-border-color: $my-border-color );  :host {     ::ng-deep {         /* カスタムテーマの読み込み */         @include igx-grid($custom-theme);          /* ヘッダー部 */         .igx-grid__thead-wrapper {             border-top: $my-border;             border-left: $my-border;             border-right: $my-border;         }          /* データ行部 */         igx-grid-row.igx-grid__tr {             border-left: $my-border;             border-right: $my-border;             border-bottom: $my-border;         }          /* データセル部 */         .igx-grid__td {             border-right: $my-border;         }     } } 

• 第 5-13 行
  • 我正在為“線寬 1px，直線，黑色”的邊框創建一個 CSS 變量，並創建一個自定義主題。
  • 有關如何創建自定義主題，請參閱以下幫助。
    • “數據網格”→“配置樣式”
    • 數據樹網格 > 樣式
• 18號線
  • 正在加載自定義主題。
• 第 20-37 行
  • 為 igx-grid 默認主題未覆蓋的部分設置單獨的邊框。