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 默認主題未覆蓋的部分設置單獨的邊框。