Угловая конструкция материала: группа радиокнопок должна быть выровнена по вертикали

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

Просто добавьте тег <br> после каждого <mat-radio-button>

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

рабочих стеблиц здесь