首页  >  问答  >  正文

Angular 16:我如何改变Angular Material复选框(MDC)的大小?

<p>在现在被认为是遗留的 Material 中,我可以按照以下方式设置复选框的大小:</p> <pre class="brush:php;toolbar:false;">.mat-checkbox-frame { width: 1.5rem; }</pre> <p>我如何在 MDC 中实现相同的效果?</p>
P粉254077747P粉254077747451 天前425

全部回复(1)我来回复

  • P粉092778585

    P粉0927785852023-08-19 11:02:21

    要更改复选框的大小,请在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; /* 添加 */
    }

    请参考实时演示

    回复
    0
  • 取消回复