Sudut 16: Bagaimanakah cara menukar saiz kotak semak Bahan Sudut (MDC)?

Question

Dalam Bahan, yang kini dianggap warisan, saya boleh menetapkan saiz kotak pilihan seperti berikut:

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

Bagaimanakah saya boleh mencapai kesan yang sama dalam MDC?

Answer 1

Untuk menukar saiz kotak pilihan, tambah kod CSS berikut dalam styles.scss:

.mdc-checkbox__background {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

Tetapi jika anda ingin menggunakan kesan riak lalai, ini hanya separuh penyelesaian. Kini anda juga perlu menyelaraskan kotak semak supaya ia sesuai dengan sempurna dalam bulatan kesan riak. Sila tambah kod CSS berikut dalam styles.scss:

.mdc-checkbox__background {
  width: 1.5rem !important;
  height: 1.5rem !important;
  top: 50% !important; /* 添加 */
  left: 50% !important; /* 添加 */
  transform: translate(-50%, -50%) !important; /* 添加 */
}

Sila rujuk demo langsung.