Angular Material Design：要垂直对齐的单选按钮组

Posted 2023-02-22

【中文标题】Angular Material Design：要垂直对齐的单选按钮组

【英文标题】：Angular Material Design : Radio button group to be vertically aligned

【发布时间】：2019-11-17 10:48:52

【问题描述】：

下面是我用来显示单选按钮的角度材料代码：

<div>
    <mat-radio-group>
        <mat-radio-button value="1">Transcription</mat-radio-button>
        <mat-radio-button value="2">Summarization</mat-radio-button>
        <mat-radio-button value="3">Both</mat-radio-button>
    </mat-radio-group>
</div>

但这是水平显示单选按钮。但我需要它们垂直显示。

【参考方案1】：

只需在每个<mat-radio-button> 之后添加一个<br> 标记

【参考方案2】：

您可以使用 CSS 来完成这项工作，在您的 mat-radio-group 中添加一个可以使用的类：

display: flex; flex-direction: column; 或display: grid; 或display: inline-grid;

相关HTML：

<div>
    <mat-radio-group class="example-radio-group">
        <mat-radio-button value="1">Transcription</mat-radio-button>
        <mat-radio-button value="2">Summarization</mat-radio-button>
        <mat-radio-button value="3">Both</mat-radio-button>
    </mat-radio-group>
</div>

相关的CSS：

.example-radio-group 
  display: flex; flex-direction: column;
  /* display: inline-grid; */ 
  /* display: grid; */
  margin: 15px 0;

工作stackblitz here

【讨论】：

如果您使用@angular/material，只需添加属性fxLayout="column"，它相当于上面的CSS类。