时间戳

首页 > 解决方案 > Angular Material 中的样式 mat-radio-button

angular-material - Angular Material 中的样式 mat-radio-button

问题描述

我刚刚开始在我的 Angular 应用程序中使用 Angular Material 主题。

我使用了一些单选按钮，但想设置它们的样式，使它们比平时小。我可以设置文本标签的样式，但我正在努力设置实际按钮本身（圆圈）的样式。

所以现在，我有

<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

解决方案

尝试这个，

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

推荐阅读