首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何更改角度材质排序图标

如何更改角度材质排序图标
EN

Stack Overflow用户
提问于 2018-08-01 21:29:23
回答 5查看 14.9K关注 0票数 8

我需要将默认箭头图标从angular material matSort更改为自定义箭头。

当前代码

代码语言:javascript
复制
 <mat-table #table [dataSource]="source" matSort (matSortChange)="sortData($event)" [matSortActive]="sort.active" [matSortDirection]="sort.direction">

有没有办法做到这一点?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2019-03-27 04:01:58

代码语言:javascript
复制
::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;
      }
    }
  }
}
票数 3
EN

Stack Overflow用户

发布于 2018-10-15 16:34:06

@Artur

你可以试试这个

代码语言:javascript
复制
[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;
      }
    }
  }
}

票数 2
EN

Stack Overflow用户

发布于 2019-02-15 14:41:49

代码语言:javascript
复制
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;
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51634592

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档