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

工作stackblitz here

Answer 2

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

角度材料设计：单选按钮组必须垂直对齐

2 个答案: