web-dev-qa-db-ja.com

変更方法angularマテリアルソートアイコン

デフォルトの矢印アイコンをangular material matSortからカスタム矢印に変更する必要があります。

現在のコード

 <mat-table #table [dataSource]="source" matSort (matSortChange)="sortData($event)" [matSortActive]="sort.active" [matSortDirection]="sort.direction">

これを行う方法はありますか？

angularangular-materialfrontendangular-material2
7
Artur

@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;
      }
    }
  }
}
1
Tamesh
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;
}
0
Satish Rabari

私がこれを思いついた@amuthanソリューションに基づいて、それはドロップダウンが使用するのと同じ矢印であり、ホバリングしたときにも表示されます：

.mat-sort-header-arrow[style] {
  .mat-sort-header-stem {
    display: none;
  }
  .mat-sort-header-indicator {
    opacity: 1;
    color: black;
    font-weight: bold;

    .mat-sort-header-pointer-left, .mat-sort-header-pointer-right, .mat-sort-header-pointer-middle  {
      display: none;
    }
  }
}
.mat-sort-header-indicator {
  &::before {
    content: "";
    top: 0.1em;
    position: absolute;
    color: $primary;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid;
    margin: 0 4px;
    transform: rotate(180deg);
    opacity: 0.6;
  }
}


[aria-sort="ascending"] {
  .mat-sort-header-arrow {
    .mat-sort-header-indicator {
      &::before {
        top: 0.1em;
        transform: rotate(180deg);
        opacity: 1;

      }
    }
  }
}

[aria-sort="descending"] {
  .mat-sort-header-arrow {
    .mat-sort-header-indicator {
      &::before {
        top: -0.6em;
        transform: rotate(0);
        opacity: 1;
      }
    }
  }
}
0
SkarXa

それは私がそれを作った方法です

<mat-header-cell *matHeaderCellDef (dblclick)="sortData(column.field)"> {{ column.title }}<mat-icon *ngIf="sort.active==column.field" style="font-size:11pt;color:dimgray;font-weight: 700;padding-left:5px">{{sort.direction=="asc"?"arrow_upward":"arrow_downward"}}</mat-icon></mat-header-cell>

<mat-icon *ngIf="sort.active==column.field" style="font-size:11pt;color:dimgray;font-weight: 700;padding-left:5px">{{sort.direction=="asc"?"arrow_upward":"arrow_downward"}}</mat-icon>**
0
user11985311