我需要将默认箭头图标从angular material matSort更改为自定义箭头。
当前代码
<mat-table #table [dataSource]="source" matSort (matSortChange)="sortData($event)" [matSortActive]="sort.active" [matSortDirection]="sort.direction">
有没有办法做到这一点?
发布于 2019-03-27 04:01:58
::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;
}
}
}
}
发布于 2018-10-15 16:34:06
@Artur
你可以试试这个
[aria-sort='ascending'] {
::ng-deep .mat-sort-header-arrow{
.mat-sort-header-indicator {
&::before{
font: normal normal normal 1.1rem/1 FontAwesome;
content: "\f0d7";
position: absolute;
top: .2rem;
}
}
}
}
[aria-sort='descending'] {
::ng-deep .mat-sort-header-arrow {
.mat-sort-header-indicator {
&::before{
font: normal normal normal 1.1rem/1 FontAwesome;
content: "\f0d8";
position: absolute;
top: -.9rem;
}
}
}
}
发布于 2019-02-15 14:41:49
Try this.
app.component.ts
import {Component, ViewEncapsulation} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
title = 'app';
}
app.component.css
.mat-sort-header-stem {
height: 3px !important;
width: 10px !important;
transform: rotate(180deg) !important;
}
.mat-sort-header-pointer-left, .mat-sort-header-pointer-right {
width: 7px !important;
height: 3px !important;
}
.mat-sort-header-pointer-middle{
width: 0px !important;
height: 0px !important;
}
https://stackoverflow.com/questions/51634592
复制相似问题