调整 MatRadioButton 的大小 - 涟漪问题

Question

我想在我的 angular 应用程序中调整 mat-radio-button 的大小。我在全球范围内定义了一种风格。在大多数情况下它是有效的，但涟漪的任何动画效果都不会调整大小，如果被 mat-radio-container 边界剪裁。

.mat-radio-container {
    height: 15px !important;
    width: 15px !important;
}
.mat-radio-outer-circle {
    height: 15px !important;
    width: 15px !important;
}
.mat-radio-inner-circle {
    height: 15px !important;
    width: 15px !important;
}
.mat-radio-button .mat-radio-ripple {
    height: 30px !important;
    width: 30px !important;
    left: calc(50% - 15px) !important;
    top: calc(50% - 15px) !important;
}

.mat-radio-ripple-element {
    height: 30px !important;
    width: 30px !important;
}

我也想调整波纹动画的大小。

Answer 1

执行此操作的一种简单方法是使用 border-radius: 50%; 将 mat-radio-ripple 更改为圆形，这样它就不会被剪裁。此属性不需要 !important，因为它最初不是由 Angular Material 设置的。此外，mat-radio-ripple-element css 在这里什么都不做，所以我们可以省略它。

已更新CSS

.mat-radio-container {
    height: 15px !important;
    width: 15px !important;
}

.mat-radio-outer-circle {
    height: 15px !important;
    width: 15px !important;
}

.mat-radio-inner-circle {
    height: 15px !important;
    width: 15px !important;
}

.mat-radio-button .mat-radio-ripple {
    height: 30px !important;
    width: 30px !important;
    left: calc(50% - 15px) !important;
    top: calc(50% - 15px) !important;
    border-radius: 50%;
}

调整 MatRadioButton 的大小 - 涟漪问题

Resize MatRadioButton - ripples issue

size

sass

angular-material

angular