私のコードはとてもシンプルです
<mat-checkbox
[(ngModel)]="checked"
[color]="'primary'"
></mat-checkbox>
このマテリアルチェックボックスを丸くするにはどうすればよいですか？border-radius: 50%この要素の下でAngularによって生成されたほとんどすべてのタグにスタイルを設定しようとしましたが、達成したほとんどのことは、長方形内の丸い「選択された」外観です。
もっと良い方法があると確信しています。ラジオボタンのグラフィックを再利用することについてこの答えを見つけましたが、自分のケースに適応させることができませんでした（どこから始めればよいかさえわかりません）
解決策は、Prashant Pimpaleが自分で回答を作成しなかったため、投稿したコメントに基づいて作成されています。Stackblitzは、これを書いている時点で最新バージョンのライブラリに更新されています。
HTML
<mat-checkbox color="primary">Regular checkbox</mat-checkbox>
<mat-checkbox class="custom-frame">Circular checkbox</mat-checkbox>
SCSS
::ng-deep .custom-frame {
& .mat-checkbox-background, .mat-checkbox-frame {
border-radius: 70% !important;
}
}
Stackblitz：https：//stackblitz.com/edit/angular-material-kuztkp
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加