web-dev-qa-db-ja.com

Angular Materialのmat-radio-buttonのスタイル

Angular私のAngular app。

いくつかのラジオボタンを使用していますが、通常よりも小さくなるようにスタイルを設定します。テキストラベルのスタイルを設定できますが、実際のボタン自体（円）のスタイルを設定するのに苦労しています。

だから今のところ、

<mat-radio-group class="smallRadio">
    <mat-radio-button value="1">Option 1</mat-radio-button>
    <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

どうすればいいですか？

angular-materialangular7
4
BENBUN Coder

これを試して、

デフォルトの半径は20pxに設定しています10px ここに

    :Host ::ng-deep .mat-radio-container{
      height: 10px;
      width: 10px;
    }
    :Host ::ng-deep .mat-radio-outer-circle{
      height: 10px;
      width: 10px;
    }
    :Host ::ng-deep .mat-radio-inner-circle{
      height: 10px;
      width: 10px;
    }
    :Host ::ng-deep .mat-radio-button .mat-radio-ripple{
      height: 20px; /*double of your required circle radius*/
      width: 20px;  /*double of your required circle radius*/
      left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
      top: calc(50% - 10px); /*'10px'-same as your required circle radius*/
    }

- 使わず ::ng-deep

カスタム無線を使用するコンポーネントのカプセル化をオフにします。

あなたはこれを行うことができます

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

スタイルを設定するコンポーネントをカスタムクラスでラップします。したがって、他の無線コンポーネントには影響しません。上記の質問では、すでにsmallRadioクラスでラップされています

.smallRadio .mat-radio-container{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-outer-circle{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-inner-circle{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-button .mat-radio-ripple{
    height: 20px; 
    width: 20px; 
    left: calc(50% - 10px); 
    top: calc(50% - 10px); 
}

ビューのカプセル化をオフにすることなく、これらのCSSをグローバルスタイルシートに追加できます。しかし、よりエレガントな方法は上記の方法です

8
Akhi Akl

プロジェクトでViewEncapsulation.Noneを使用するしないでください。将来的には、予測不能な動作につながるでしょう。 1つのコンポーネント内のスタイルを変更すると、他のいくつかのコンポーネントも変更される可能性があり、どのコンポーネントを見つけるのが難しいでしょう。

angular materialのスタイルをオーバーライドする場合は、"material-overrides.scss"のような名前でプロジェクトに別の* .scssを作成し、さまざまなコンポーネントのすべてのスタイル変更を配置することをお勧めします。たとえば、ファイルは次のようになります

example-component {
    .smallRadio .mat-radio-container{
      height: 10px !important;
      width: 10px !important;
    }
    .smallRadio .mat-radio-outer-circle{
        height: 10px !important;
        width: 10px !important;
    }
    .smallRadio .mat-radio-inner-circle{
        height: 10px !important;
        width: 10px !important;
    }
    .smallRadio .mat-radio-button .mat-radio-ripple{
        height: 20px !important; 
        width: 20px !important; 
        left: calc(50% - 10px) !important; 
        top: calc(50% - 10px) !important; 
    }
}

私の例では!importantに注意してください。それもまた良い習慣ではありません。より正確な指定 MDN web docs に置き換える必要があります。

次のように、作成したmaterial-overrides.scssファイルをstyles.scssに追加することも忘れないでください。

@import './material-overrides.scss';

angular material team- link からオーバーライドの推奨事項を読むこともできます。

1
Sergey_T