本文介绍了如何更改有角度的材料排序图标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要将默认箭头图标从有角材质 matSort 更改为自定义箭头.
I need to change default arrow icon from angular material matSort to a custom arrow.
当前代码
<mat-table #table [dataSource]="source" matSort (matSortChange)="sortData($event)" [matSortActive]="sort.active" [matSortDirection]="sort.direction">
有没有办法做到这一点?
Is there any way to do this ?
推荐答案
::ng-deep .mat-sort-header-arrow[style] {
// Hide default arrow stem
.mat-sort-header-stem {
display: none;
}
.mat-sort-header-indicator {
opacity: 1;
color: black;
font-weight: bold;
// Hide default arrow as its composed of left, right and middle
.mat-sort-header-pointer-left, .mat-sort-header-pointer-right, .mat-sort-header-pointer-middle {
display: none;
}
}
}
// My custom ascending arrow
[aria-sort="ascending"] {
::ng-deep .mat-sort-header-arrow {
.mat-sort-header-indicator {
&::before {
content: "\2191";
top: -1.6em;
position: absolute;
}
}
}
}
// My custom descending arrow
[aria-sort="descending"] {
::ng-deep .mat-sort-header-arrow {
.mat-sort-header-indicator {
&::before {
content: "\2193";
top: -2.4em;
position: absolute;
}
}
}
}
这篇关于如何更改有角度的材料排序图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!