Question

我正在检查https://material.angular.io/components/sort/overview上的可排序表格示例

我不喜欢的是排序图标仅在将列标题悬停时才会显示。

有什么办法让他们永远在那里？（不仅是悬停）

Answer 1

您需要将CSS样式应用于.mat-table / table选择器：

.mat-sort-header-sorted .mat-sort-header-arrow {
  transform: none !important;
  opacity: 1 !important;
}
.mat-sort-header-arrow {
  transform: none !important;
  opacity: 0.54 !important;
}

注意：在某些情况下，您需要在.mat-sort-header ...之前使用:: ng-deep来应用样式

然后，您需要在表格中禁用Angular动画，因为您会在悬停时看到小的动画，因此请将其添加到模板中的.mat-table / table选择器：

    <table
      ...[your inputs]
      [@.disabled]="true"
    >

最后一步-例如，您的标准排序方向为“ asc”，然后将您的排序中的一个更改为“ desc”，然后选择另一个排序为“ asc”的图标，您将看到“ desc”图标不会重置为标准的“ asc”方向，因此解决方案是为未定义方向的图标设置CSS样式：

  th:not([aria-sort]) {
    ::ng-deep .mat-sort-header-indicator {
      transform: translateY(10px) !important;
      .mat-sort-header-pointer-left {
        transform: rotate(45deg) !important;
      }
      .mat-sort-header-pointer-right {
        transform: rotate(-45deg) !important;
      }
    }
  }

Answer 2

全局应用以下样式。它将始终显示排序图标，并根据排序方向更改图标。

.mat-table{
  .mat-sort-header-arrow {
    opacity: 0 !important;
    display: none !important;
  }
  th[aria-sort='ascending'] {
    color: #0069c0;
    .mat-sort-header-button {
      &:before {
        border-bottom-color: #0069c0 !important;
      }
      &:after {
        border-top-color: transparent !important;
      }
    }
  }
  th[aria-sort='descending'] {
    color: #0069c0;
    .mat-sort-header-button {
      &:before {
        border-bottom-color: transparent !important;
      }
      &:after {
        border-top-color: #0069c0 !important;
      }
    }
  }
  .mat-sort-header-button {
    transition: all ease-in 300ms;
    &:before,
    &:after {
      border: 4px solid transparent;
      content: '';
      display: block;
      height: 0;
      right: 10%;
      top: 50%;
      position: absolute;
      width: 0;
    }
    &:before {
      border-bottom-color: #ababab;
      margin-top: -10px;
    }
    &:after {
      border-top-color: #ababab;
      margin-top: 1px;
    }
  }
}

注意：：它将隐藏默认的角度排序图标。

Answer 3

如果尚未对列进行排序，则悬停/聚焦/长按标题将显示排序图标。如果对列进行了排序，则图标将一直显示，直到该列变为未排序为止。如果要始终显示排序图标，则必须对表中的列之一进行排序，如下所示：

   <table matSort (matSortChange)="sortData($event)" matSortActive="name" 
   matSortDirection="asc" matSortDisableClear>

Answer 4

尝试一下：

.mat-sort-header-arrow {
  opacity: .4!important;
}

角度材料可排序表-始终显示排序图标（不仅在悬停时）

4 个答案: