Сделать угловой материал Mat-Button-Toggle-Group отзывчивым - PullRequest
Новая
       42

Сделать угловой материал Mat-Button-Toggle-Group отзывчивым

0 голосов
/ 23 января 2019

У меня есть группа кнопок-переключателей с 6 кнопками-переключателями. На рабочем столе все кнопки должны быть в одной строке. На экранах меньшего размера группа должна разбиваться и отображать 2 строки кнопок следующим образом: enter image description here

Это мой код (я использую flexbox-grid): 

<mat-button-toggle-group class="col-xs-12"
      <mat-button-toggle class="col-xs-4 col-lg-2" value="1">1 Monat</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="3">3 Monate</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="6">6 Monate</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="12">1 Jahr</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="60">5 Jahre</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="120">10 Jahre</mat-button-toggle>
  </mat-button-toggle-group>

Если на рабочем столе отлично работает, но на экране мобильного телефона видны только 3 кнопки (три, которые должны быть во второй строке, не видны): enter image description here

Как я могу заставить мою группу кнопок-матов переключиться на две строки?

1 Ответ

0 голосов
/ 23 января 2019

Необходимо установить для свойства flex-wrap значение wrap для элемента группы переключения: 

mat-button-toggle-group {
  flex-wrap: wrap;
}

Тогда просто исправьте границы, как вам угодно.

...