如何在ng2-smart-table中添加自定义css
如何在ng2-smart-table中添加自定义css
提问于 2017-08-26 15:51:25
我正在使用angular 2和ng2-smart-table。
这是我的代码。
settings = {
mode:"external",
actions:{add:false,position:'right',custom: [{ name: 'View', title: `<i class="fa fa-eye" aria-hidden="true"></i>` }]},
edit: {
editButtonContent: '<i class="fa fa-pencil-square" aria-hidden="true"></i>',
saveButtonContent: '<i class="ion-checkmark"></i>',
cancelButtonContent:'<i class="ion-close"></i>',
},
delete: {
deleteButtonContent: '<i class="fa fa-trash" aria-hidden="true"></i>',
confirmDelete: true
},
columns: {
Check:{
title: "Check",
type: 'html',
},
filter: false
},
orderby:{
title: "Name",
filter: true
},
purchased:{
title: "Purchased",
type: 'html',
},
filter: false
},
shipto:{
title: "Ship To",
filter: true
},
date:{
title: "Date",
filter: true
},
total:{
title: "Total Amount",
filter: true
},
status: {
title: "Status",
filter: true
}
}
};我在表格中添加了自定义视图图标。它可以工作，但是如何在ng2-smart-table中添加自定义css？
我试过了
ng2-smart-table thead > tr > th { background-color: blue; }但它不起作用。
回答 7
Stack Overflow用户
回答已采纳
发布于 2017-08-26 16:05:39
尝试使用host，以便在未设置view encapsulation的情况下设置组件的样式。
:host /deep/ ng2-smart-table thead > tr > th {
background-color:blue;
}有关主机和主机上下文link的详细信息
Stack Overflow用户
发布于 2017-10-14 15:29:44
我已经在表中进行了更改，并在SCSS文件中进行了以下更改
:host /deep/ ng2-smart-table-title a:focus { color: #009ECE; }
:host /deep/ ng2-smart-table thead > tr > th > div { color: #009ECE; }
:host /deep/ td.ng2-smart-actions a {cursor: pointer;color: #009ECE; }Stack Overflow用户
发布于 2018-04-11 03:06:54
在设置对象中使用下面的配置
attr: {
class: 'table table-bordered'
},和
:host /deep/ ng2-smart-table {
font-size: 16px;
}示例：
settings = {
columns: {
id: {
title: 'ID'
},
name: {
title: 'Full Name'
},
username: {
title: 'User Name'
},
email: {
title: 'Email'
}
},
attr: {
class: 'table table-bordered'
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45893206
复制相关文章
相似问题
腾讯云开发者
