我正在创建 Angular 5 元素,我想在排序 header 中创建自定义排序图标以实现此效果 https://fontawesome.com/icons/caret-up?style=solid .我不想要这个默认箭头。
我尝试更改 css 样式,但似乎不起作用。或者有什么方法可以使用 JS 自定义替换此图标?
::ng-deep {
.cdk-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.mat-sort-header-stem {
background: none;
display: none !important;
}
.mat-sort-header-container {
position: relative;
}
.mat-sort-header-indicator {
transform: translateY(0px) !important;
}
.mat-sort-header-arrow {
position: absolute;
right: 20px;
transform: translateY(0%) !important;
}
}
感谢任何建议。
编辑。
如果有人遇到这个问题,我通过向 mat-sort-header 元素添加自定义指令来解决它。我还向指令传递了排序方向(ASC 或 DESC)。最后根据方向,我使用纯 CSS 定制了我的排序图标。
最佳答案
看看对你有没有帮助
.triangle {
overflow: hidden;
position: relative;
margin: 2em auto;
border-radius: 20%;
transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
width: 5em;
height: 5em;
}
.triangle:before {
border-radius: 20% 20% 20% 53%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(.866) translateX(-24%);
position: absolute;
background: #ccc;
pointer-events: auto;
content: '';
width: 5em;
height: 5em;
}
.triangle:after {
border-radius: 20% 20% 53% 20%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(.866) translateX(24%);
position: absolute;
background: #ccc;
pointer-events: auto;
content: '';
width: 5em;
height: 5em;
}
<div class="triangle"></div>
关于javascript - 在 Angular Material 排序标题中创建自定义箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53648308/