angular - 在 bootstrap 4 中使用 angular-cdk 表

Question

我正在使用 Angular CDK 表（没有 Angular Material2）并且想使用引导表设计来设置它的样式。

可以向 CDK 表添加类，但引导规则直接处理 html 表元素tr, td, ... 并且 Angular CDK 使用自定义标签cdk-table, cdk-row, cdk-cell...

作为快速而肮脏的解决方案，我为 cdk 元素编写了自己的规则，其中包含大量来自引导源的复制粘贴。但是，是否有一个很好的、也许更面向未来的解决方案来自动继承 CDK 表的引导规则？

Answer 1

我使用 sass 版本的 bootstrap 并为 cdk-table 添加了以下样式，取得了很好的效果：

.cdk-table { display: table; @extend table; }
.cdk-header-row { display: table-row; @extend thead; }
.cdk-header-cell { display: table-cell; @extend th; }
.cdk-row { display: table-row; @extend tr; }
.cdk-cell { display: table-cell; @extend td; }
.cdk-table.table-hover .cdk-row:hover { background-color: rgba(0, 0, 0, 0.075); }

Answer 2

我能够毫无问题地获得一个 cdk 表来使用 bootstrap 4。假设你已经安装了引导程序，在 .component.scss 文件中添加：

@import "~/bootstrap/scss/bootstrap"

您还可以将其添加到 styles.scss 文件中以使其成为全局文件。

然后在 .component.html 中：

<table [datasource]="someDatasource" cdk-table class="table table-bordered">
...
</table>

Answer 3

您可以覆盖样式：.cdk-column-...列的名称... { ... }。这是 css 类将在 cdk-header-cell 中最后插入...

Answer 4

我不相信有。Cdk 表并不是真正的表元素。