简体   繁体   English

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

[英]How to edit the color of the sort glyph when using ng-table?

In a table made using AngularJS ng-table, very similar to: http://ng-table.com/#/demo/2-1 i have to change the colour of the sort symbol for default/ascendent/descendent and normal/hover/active state. 在使用AngularJS ng-table制作的表格中,该表格非常类似于: http : //ng-table.com/#/demo/2-1我必须更改默认/提升/降序和正常/的排序符号的颜色悬停/活动状态。 I assume it's done by CSS(SASS) but what is the selector and how you can use it in this case? 我假设它是由CSS(SASS)完成的,但是选择器是什么,在这种情况下如何使用呢?

It is in CSS following are the two classes: 在CSS中,以下是两个类:

CSS for up arrow and ascending Sorting: CSS的向上箭头和升序排序:

.ng-table th.sortable .sort-indicator:after, {
      border-color: #AB8383 transparent;
    }

and CSS for down arrow: 和CSS表示向下箭头:

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

Descending Sorting: 降序排列:

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

For hover you may use: 对于悬停,您可以使用:

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

Overwrite some classes: 覆盖一些类:

.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;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM