gpt4 book ai didi

angular - 编辑 ngx-datatable 样式问题

转载 作者:行者123 更新时间:2023-12-05 02:16:30 25 4
gpt4 key购买 nike

我正在关注 ngx-datatable 的主题设置。

首先,我 npm 安装了 ngx-datatable 10.4.0,因为它与 Angular 4 和更早版本的 rxjs 兼容。

我的问题是表格的样式。

我的模板文件如下所示:

<div>
<ngx-datatable
[rows]="rows"
[columns]="columns"
[columnMode]="'standard'"
class="material"
fixed-header
[headerHeight]="50"
[scrollbarV]="true">
</ngx-datatable>
</div>

在我的 scss 文件中:

@import '~@swimlane/ngx-datatable/release/index.css';
@import '~@swimlane/ngx-datatable/release/themes/material.css';
@import '~@swimlane/ngx-datatable/release/themes/bootstrap.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css';

而且我可以确认 Material 样式在一定程度上起作用: enter image description here

我想在标题下添加一个底部边框,但无济于事。

如果您查看演示:http://swimlane.github.io/ngx-datatable/#filter

样本表始终有一个 border-bottom。

如何配置表格以在标题下方插入边框底部?

我的 ngx-datatable 设置有问题吗?

最佳答案

该组件的任何样式都应在global styles.scss 文件中完成。

styles.scss:

/* You can add global styles to this file, and also import other style files */
@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/bootstrap.scss';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/themes/dark.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';

/* Preferably put any custom styles for ngx-datatable into your own "_datatable.scss" file
and @import it into global styles, but this is a simple working example */

.ngx-datatable {
border: 1px solid #dddddd;
...
}

如果您还没有使用全局样式文件,请确保它存在于 src/styles.scss 中。确保它包含在 architect/build/options/styles 下的 angular.json 中:

...
"styles": [
"src/styles.scss",
...
]

Angular CLI 应用程序应该默认构建所有这些。

很遗憾文档没有提到这一点,但是组件上的 View 封装将阻止样式渗透到任何嵌套组件中。这实际上是更可取的,这样当您构建一个组件供其他人安装并且您意外使用相同的类名时,您的样式不会被破坏。

关于angular - 编辑 ngx-datatable 样式问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49866144/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com