是否可以使 mat-button-toggle-group 响应？答案

【问题标题】：Is it possible to make mat-button-toggle-group to be responsive?是否可以使 mat-button-toggle-group 响应？
【发布时间】：2019-01-25 04:33:16
【问题描述】：

mat-button-toggle-group 不会在小屏幕上包裹切换按钮。是否可以强制mat-button-toggle-group 响应？

以下代码无法响应：

  <div class="row">
    <div class="col-9">
      <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
        <mat-button-toggle value="bold" buttonToggleGroup="fontStyle">Bold</mat-button-toggle>
        <mat-button-toggle value="italic" buttonToggleGroup="fontStyle">Italic</mat-button-toggle>
        <mat-button-toggle value="underline" buttonToggleGroup="fontStyle">Underline</mat-button-toggle>
        <mat-button-toggle value="bold" buttonToggleGroup="fontStyle">Bold</mat-button-toggle>
        <mat-button-toggle value="italic" buttonToggleGroup="fontStyle">Italic</mat-button-toggle>
        <mat-button-toggle value="underline" buttonToggleGroup="fontStyle">Underline</mat-button-toggle>
        <mat-button-toggle value="bold" buttonToggleGroup="fontStyle">Bold</mat-button-toggle>
        <mat-button-toggle value="italic" buttonToggleGroup="fontStyle">Italic</mat-button-toggle>
        <mat-button-toggle value="underline" buttonToggleGroup="fontStyle">Underline</mat-button-toggle>
      </mat-button-toggle-group>
    </div>
  </div>

【问题讨论】：

标签： angular material-design angular6

【解决方案1】：

我使用@angular/flex-layout 来观看媒体查询，并根据窗口的大小显示完整的或显示一个和一个按钮以及一个带有选项的垫子菜单。

这是一个例子：https://angular-rb5vmu.stackblitz.io 查看“angular material responsive mat-button-toggle-group”并尝试调整浏览器窗口宽度

【讨论】：

谢谢你的把戏，我玩了方向和媒体查询。我想要 2x4、3x3、4x2 包裹的按钮，具体取决于屏幕尺寸。但看起来mat-button-toggle-group 不适合移动使用。
我也无法让它响应，所以我只是在小屏幕上使用了一个按钮和一个菜单。
在中设置 vertical="boolean_condition" 就可以了。有没有办法为 flex layout 'lt-sm' 设置 'boolean_condition' 为 true （小屏幕尺寸）？
要添加到@shaheershukur 的评论中：在您的 HTML 中：<mat-button-toggle-group [vertical]="isVertical"...> ... <mat-button-toggle-group> 在您的 TS 中：... public get isVertical: boolean { return true; }...s >