在 Angular Material 中设计垫子单选按钮

Question

我刚刚开始在我的 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>

我该怎么办？

Answer 1

试试这个，

默认半径是

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

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

Answer 2

请不要在您的项目中使用

ViewEncapsulation.None

。将来这将导致不可预测的行为。当您更改一个组件内的样式时，其他一些组件也可能会更改，但很难找到哪些组件。

如果您想覆盖角度材质的样式，我建议在您的项目中创建一个单独的 *.scss，其名称类似于

"material-overrides.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 网络文档。

也请不要忘记将您创建的

material-overrides.scss

文件添加到

styles.scss

，如下所示：

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

您还可以阅读 Angular Material 团队的覆盖建议 - link。

Answer 3

我想，这应该足够了：

.mat-radio-container {
    transform: scale(0.85);
}

根据您的需要选择秤中的数字。

Answer 4

试试这个： 我已经让它工作了，改变CSS

    :host ::ng-deep .mat-radio-outer-circle{
      border-radius:2px;
    }
    :host ::ng-deep .mat-radio-inner-circle{
        border-radius:2px;
        background-color: transparent!important;
        border-bottom: 4px solid white;
        border-right:4px solid white;
        height:30px;  
        width:15px;
        margin-top: -8px;
       margin-left: 3px;
    }
    :host ::ng-deep .mat-radio-checked .mat-radio-outer-circle{
       background:#ff4081!important;
    }
    :host ::ng-deep .mat-radio-checked .mat-radio-inner-circle{
       transform: rotate(45deg) scale(0.5);
    }
 
    :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 */
    }

Answer 5

2024 年更新（Angular 16）

在我使用

@angular/material

16.0.0 的项目中，上述解决方案不起作用（尚未针对 Angular 18 进行测试）。不过，我创建了这个灵活的 Sass mixin，可用于调整外观。

@mixin flexible-radio-button($size, $touch-target-size, $padding: null) {
  ::ng-deep {
    .mdc-radio {
      @if ($padding) {
        padding: $padding;
        // default is `calc((var(--mdc-radio-state-layer-size) - 20px) / 2);`
      }

      --mdc-radio-state-layer-size: 2 * $size;
      height: $size;
      width: $size;
    }

    .mat-mdc-radio-touch-target {
      height: $touch-target-size;
      width: $touch-target-size;
    }

    .mdc-radio__background {
      height: $size;
      width: $size;
    }

    .mdc-radio__inner-circle {
      border-width: $size / 2;
    }
  }
}

.small-radio-button {
  @include flexible-radio-button(16px, 26px, 2px);
}

<mat-radio-group>
  <mat-radio-button class="small-radio-button" value="apple">
    Apple
  </mat-radio-button>
  <mat-radio-button class="small-radio-button" value="banana">
    Banana
  </mat-radio-button>
  <mat-radio-button class="small-radio-button" value="orange">
    Orange
  </mat-radio-button>
</mat-radio-group>

<br><br><br>

<mat-radio-group>
  <mat-radio-button value="apple">Apple</mat-radio-button>
  <mat-radio-button value="banana">Banana</mat-radio-button>
  <mat-radio-button value="orange">Orange</mat-radio-button>
</mat-radio-group>

图标与标签的对齐可能有点偏离，但我还没弄清楚为什么会这样。