Используйте таблицу angular-cdk с начальной загрузкой 4

Я использую Angular таблицу CDK (без Angular Material2) и хочу использовать < href="https://getbootstrap.com/docs/4.0/content/tables/" rel="nofollow noreferrer">дизайн таблицы начальной загрузки для его оформления.

В таблицу CDK можно добавлять классы, но правила начальной загрузки напрямую обращаются к элементам таблицы html tr, td,..., а Angular CDK использует пользовательские теги cdk-table, cdk-row, cdk-cell...

В качестве быстрого и грязного решения я написал свои собственные правила для элементов cdk с большим количеством копипаста из исходников начальной загрузки. Но есть ли хорошее и, возможно, более перспективное решение для автоматического наследования правил начальной загрузки для таблиц CDK?


angular sass bootstrap-4 angular-material2 angular-cdk
person Moritz    schedule 10.02.2018    source источник

Ответы (4)


arrow_upward
3
arrow_downward

У меня были хорошие результаты с использованием sass-версии бутстрапа и добавлением следующих стилей для 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); }
person Michal Filip    schedule 14.02.2018

arrow_upward
1
arrow_downward

Мне удалось получить таблицу cdk для использования bootstrap 4 без каких-либо проблем. Предполагая, что у вас установлен bootstrap, в файле .component.scss просто добавьте:

@import "~/bootstrap/scss/bootstrap"

Вы также можете добавить его в файл styles.scss, чтобы сделать его глобальным.

Затем в .component.html:

<table [datasource]="someDatasource" cdk-table class="table table-bordered">
...
</table>
person Bill Clyde    schedule 16.04.2019
comment
Я думаю, что это более правильно, чем принятый ответ - предполагается, что cdk-table используется как директива, а не как элемент. Он реализует только поведение, в то время как за стиль отвечает элемент, к которому он применяется. - person sax; 12.01.2021

arrow_upward
0
arrow_downward

Я не верю, что есть. Таблица Cdk на самом деле не является элементом таблицы.

person funkizer    schedule 10.02.2018
comment
Я думаю, что я рекомендую не пытаться сделать таблицу cdk похожей на bs, вместо этого написать свой собственный компонент таблицы в стиле bs. :) - person funkizer; 11.02.2018

arrow_upward
0
arrow_downward

Вы можете переопределить стиль: .cdk-column-...имя столбца... {...}. этот класс css будет вставлен последним в ячейку cdk-header...

person Anton    schedule 27.03.2018