Угловая кнопка переключения на более чем 1 линию

Question

Я хочу реализовать несколько угловых переключателей.Я точно не знаю, сколько, это зависит от данных моей базы данных.

Кнопки показаны на боковой панели, что означает, что в одной строке можно отобразить только до 3 кнопок.

Есть ли способ перейти на новую строку после, например, 3 кнопок?Без создания новой группы кнопок-матов-переключателей?

Вот мой код:

      <mat-button-toggle-group multiple name="categories_1" ngModel aria-label="Kategorien">
        <mat-button-toggle value="LOREM1_1" checked>Value1</mat-button-toggle>
        <mat-button-toggle value="LOREM1_2" checked>Value2</mat-button-toggle>
        <mat-button-toggle value="LOREM1_3" checked>Value3</mat-button-toggle>
        <mat-button-toggle value="LOREM2_1" checked>Value4</mat-button-toggle>
      </mat-button-toggle-group>

Спасибо за помощь!

Answer 1

Вы можете использовать flex для этого.

<mat-button-toggle-group fxLayout="row" multiple name="categories_1" ngModel aria-label="Kategorien">
    <mat-button-toggle fxFlex="33%" value="LOREM1_1" checked>Value1</mat-button-toggle>
    <mat-button-toggle fxFlex="33%" value="LOREM1_2" checked>Value2</mat-button-toggle>
    <mat-button-toggle fxFlex="33%" value="LOREM1_3" checked>Value3</mat-button-toggle>
    <mat-button-toggle fxFlex="33%" value="LOREM2_1" checked>Value4</mat-button-toggle>
    ...
</mat-button-toggle-group>

Или вы также можете выполнить цикл с *ngFor в случае неизвестного количества элементов, и все еще использовать ширину изгиба 33%, чтобы получить 3пунктов в строке.Вы можете настроить ширину%, чтобы получить больше или меньше элементов в одной строке.