文章分類/

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

148 瀏覽人次
2023-09-03 更新

infragistics log

如果您想在 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 行

  • 18號線

    • 正在加載自定義主題。
  • 第 20-37 行

    • 為 igx-grid 默認主題未覆蓋的部分設置單獨的邊框。

快速跳轉目錄

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

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

Picture of 軟體專家
軟體專家

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

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊