Angular Material 中的样式 mat-radio-button [英] Styling mat-radio-button in Angular Material

问题描述

我刚刚开始在我的 Angular 应用中使用 Angular Material 主题.

I have just started using the Angular Material theme within my Angular app.

我使用了一些单选按钮，但想对它们进行样式设置，使它们比平时更小.我可以设置文本标签的样式，但我很难自己设置实际按钮的样式(圆圈).

I make use of some radio buttons but want to style them so that they are smaller than usual. I can style the text labels but I am struggling to style the actual buttons themselves (the circles).

所以现在，我有

<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>

我应该怎么做?

推荐答案

试试这个，

默认半径为 20px 我们在这里将其设置为 10px

Default radius is 20px we are setting it to 10px here

    :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

关闭您在其中使用自定义无线电的组件的封装.

Turn off encapsulation of your component inside which you use the custom radio.

你可以这样做

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

将要设置样式的组件包装在自定义类中.这样它就不会影响任何其他无线电组件.在上面的问题中，它已经用 smallRadio 类

Wrap the component you want to style in a custom class.So it wont affect any other radio components. In the above question its already wrapped with smallRadio class

.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，而无需关闭视图封装.但更优雅的方法是上面的一种

You can add these css in global stylesheet without turning off view encapsulation. But more elegant method is the above one

这篇关于Angular Material 中的样式 mat-radio-button的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！