Angular 16:我如何改变Angular Material复选框(MDC)的大小?
P粉254077747
P粉254077747 2023-08-18 11:42:41
0
1
363

在现在被认为是遗留的 Material 中,我可以按照以下方式设置复选框的大小:

.mat-checkbox-frame { width: 1.5rem; }

我如何在 MDC 中实现相同的效果?

P粉254077747
P粉254077747

全部回复 (1)
P粉092778585

要更改复选框的大小,请在styles.scss中添加以下CSS代码:

.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; /* 添加 */ }

请参考实时演示

    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!