我成功地将垫子指示器向左移动,而不是向右移动,并且我使用transform属性使其在展开时向内转动。但是,我希望指示器在展开时朝上,在折叠时朝下。如何正确设置样式以实现这一点:https://stackblitz.com/edit/indicatorrotation?file=styles.css
expansion-overview-example.css
.mat-expansion-panel-header {
flex-direction: row-reverse;
}
全局样式.css
.mat-expansion-indicator::after {
transform: rotate(225deg) !important;
}
3条答案
按热度按时间mwkjh3gx1#
垫扩展指示器的旋转是由这个动画处理.正如它可以在那里看到它是简单的
rotate(180deg)
(180 deg顺时针).和指示器最初有rotate(45deg)
其中显示向下图标默认情况下当面板关闭和向上图标时面板打开顺时针动画.应用旋转时;
图标是向上旋转最初当面板关闭,当点击它是由180 deg顺时针旋转.在这一点上,你不能显示向下图标时关闭和向上时打开,因为
rotate(225deg)
,如果你改变,你松向内转动,因为动画开始顺时针,但我们需要完全相反.最后,如果不覆盖默认动画,逆时针旋转是不可能的。不幸的是,Angular 材质没有任何机制来覆盖默认动画,as seen here。
所以我的解决方案是完全禁用
mat-expansion-panel-header
上的默认动画,并实现一个自定义指令,该指令模仿此动画,但逆时针。首先禁用
mat-expansion-panel-header
上的默认动画;<mat-expansion-panel-header [@.disabled]="true">
然后在
styles.css
中创建新的动画,其时间和行为与默认动画相同。并实现基于面板打开/关闭事件处理动画状态的自定义指令
最后将自定义指令应用于
mat-expansion-panel
下面是一个工作演示https://stackblitz.com/edit/indicatorrotation-mp73uh
x6492ojm2#
禁用默认动画:
在一些全局样式中重写样式。scss
but5z9lq3#
谢谢Ivan,实际上,你只需要这个(不需要禁用动画)(我知道ng-deep已被弃用):