84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
在现在被认为是遗留的 Material 中,我可以按照以下方式设置复选框的大小:
.mat-checkbox-frame { width: 1.5rem; }
我如何在 MDC 中实现相同的效果?
要更改复选框的大小,请在styles.scss中添加以下CSS代码:
styles.scss
.mdc-checkbox__background { width: 1.5rem !important; height: 1.5rem !important; }
但是,如果您想使用默认的涟漪效果,这只是解决方案的一半。现在您还需要对齐复选框,使其完美地适应涟漪效果的圆圈中。请在styles.scss中添加以下CSS代码:
.mdc-checkbox__background { width: 1.5rem !important; height: 1.5rem !important; top: 50% !important; /* 添加 */ left: 50% !important; /* 添加 */ transform: translate(-50%, -50%) !important; /* 添加 */ }
请参考实时演示。
要更改复选框的大小,请在
styles.scss
中添加以下CSS代码:但是,如果您想使用默认的涟漪效果,这只是解决方案的一半。现在您还需要对齐复选框,使其完美地适应涟漪效果的圆圈中。请在
styles.scss
中添加以下CSS代码:请参考实时演示。