Question

我想实现一些角度切换按钮。我不知道具体多少，这取决于我的数据库数据。

按钮显示在侧栏上，这意味着一行中最多只能显示3个按钮。

是否有一种方法可以在例如3个按钮？是否不创建新的mat-button-toggle-group？

这是我的代码：

      <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个项目。您可以调整width％以在一行中获得更多或更少的项目。

超过1行的角度切换按钮

1 个答案: