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

Question

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

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

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

Answer 1

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

Answer 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