Редактирование проблем стилей в ngx-datatable
Я следую за настройкой темы для 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';
И я могу подтвердить, что стайлинг материала работает в определенной степени:
Я хочу добавить рамку внизу под моим заголовком, но безрезультатно.
Если вы посмотрите демоверсию: http://swimlane.github.io/ngx-datatable/
Для таблиц примеров всегда есть граница.
Как настроить таблицу для вставки границы снизу под заголовком?
Есть ли проблема с моей настройкой ngx-datatable?
1 ответ
Любое оформление этого компонента должно выполняться в глобальном 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
. Убедитесь, что он включен в angular.json в разделеarchitect/build/options/styles
:
...
"styles": [
"src/styles.scss",
...
]
Все это должно быть встроено в приложения Angular CLI по умолчанию.
Жаль, что в документации об этом не упоминается, но инкапсуляция представления на вашем компоненте будет блокировать попадание стилей во вложенные компоненты. На самом деле это предпочтительнее, чтобы ваши стили не испортились, когда вы создаете компонент, который должен установить кто-то другой, и случайно используете те же имена классов.
Вставить border-bottom
и установите для него различные параметры, представленные в меню.
Обратитесь к коду ниже:
> .content {
//width: ~"calc(100% - 900px)";
//width: 100%;
border-top: none;
border-bottom:
}
9 месяцев спустя...
Проверьте это в вашем компоненте
encapsulation: ViewEncapsulation.None