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

您可以使用 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;
}

在这里工作堆栈闪电战