时间戳

首页 > 解决方案 > 如何使角垫表中的排序箭头始终可见？

angular - 如何使角垫表中的排序箭头始终可见？

问题描述

目标是使角垫表的排序箭头始终可见（例如，它们始终将不透明度设置为 0.54）。

我尝试在我的.css文件中为这个组件添加一些 css 代码。它使所有箭头可见（我将不透明度设置为 0.54），但在这种情况下，所有箭头始终保持此不透明度，即使单击箭头也是如此（通常，如果单击箭头，不透明度将设置为 1）。

我添加到.css文件中的代码：

::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
  opacity: 0.54 !important;
}

我希望箭头始终以不透明度 0.54 显示。箭头的其余行为应保持不变。在列未排序的情况下，例如箭头处于未定义状态，箭头应该是向上箭头并且不透明度为 0.54。如果我单击箭头，它的不透明度应该设置为 1。如果我取消排序，箭头的不透明度应该再次设置为 0.54。

这里有一个例子：https ://stackblitz.com/edit/angular-isxoc5 。所有箭头都按我的意愿显示。但是如果你点击一个箭头，它的不透明度仍然是 0.54，而不是 1。

标签： angularangular-materialangular7

解决方案

正如 Ervin 评论的那样，但使​​用 ng-deep

::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
  opacity: 0.54 !important;
  transform: translateY(0px) !important;
}

但是，这不会删除悬停进入和悬停退出时箭头上的动画。

推荐阅读