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

将您想要设置样式的组件包装在自定义 class.So 中，它不会影响任何其他无线电组件。在上面的问题中，它已经用 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。将来它将导致不可预测的行为。当您在一个组件内更改样式时，其他一些组件也可以更改，但很难找到哪些组件。

如果您想覆盖 angular material 的样式，我建议在您的项目中创建一个单独的 *.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 web docs.

也请不要忘记将您创建的 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 */
    }

Angular Material 中的样式单选按钮

Styling mat-radio-button in Angular Material

angular-material

angular7