如何在使用ng-table时编辑排序字形的颜色?

时间:2015-06-12 15:08:27

标签: css angularjs ngtable

在使用AngularJS ng-table制作的表格中,非常类似于: http://ng-table.com/#/demo/2-1 我必须更改默认/ ascendent / descendent和normal / hover / active状态的排序符号的颜色。 我认为它是由CSS(SASS)完成的,但选择器是什么以及如何在这种情况下使用它?

2 个答案:

答案 0 :(得分:0)

以下是CSS中的两个类:

向上箭头和升序排序的CSS:

.ng-table th.sortable .sort-indicator:after, {
      border-color: #AB8383 transparent;
    }
向下箭头的

和CSS:

.ng-table th.sortable .sort-indicator:before{
  border-top: 4px solid #4D1F4B;
}

降序排序:

.ng-table th.sortable.sort-desc .sort-indicator:after{
border-top: 4px solid #420A0A;
}

悬停时,您可以使用:

.ng-table th.sortable .sort-indicator:hover:after, .ng-table th.sortable .sort-indicator:hover:before{
//css rule here
}

答案 1 :(得分:0)

覆盖一些类:

.ng-table th.sortable .sort-indicator:before,
.ng-table th.sortable.sort-desc .sort-indicator:after, 
.ng-table th.sortable.sort-desc .sort-indicator:hover:after{
  border-top: 4px solid #4D1F4B;
}

.ng-table th.sortable .sort-indicator:after,
.ng-table th.sortable.sort-asc .sort-indicator:after, 
.ng-table th.sortable.sort-asc .sort-indicator:hover:after{
  border-bottom: 4px solid #4D1F4B;
}