在mat-grid内使用mat-button-toggle-group [英] Use mat-button-toggle-group inside a mat-grid

问题描述

我有5个按钮，占据mat-grid的5列.这些按钮应充当切换按钮，并且所有5个按钮应属于一个组.
我尝试将mat-grid用mat-button-toggle-group括起来，但仍然无法正常工作.
非常感谢您的帮助.

I have 5 buttons occupying 5 columns of a mat-grid. The buttons should behave as toggle buttons and all 5 should belong to a single group.
I tried enclosing the mat-grid with mat-button-toggle-group, but still isn't working.
Any help is much appreciated.

代码:

 <mat-grid-list cols="11" rowHeight="40px">  
   <mat-grid-tile >
      <label>Label 1</label><!-- below buttons should be a single group -->
   </mat-grid-tile>
   <mat-grid-tile colspan='2'>
          <mat-button-toggle >Button 1</mat-button-toggle>

    </mat-grid-tile>
      ....
     <mat-grid-tile colspan='2'>
          <mat-button-toggle >Button 5</mat-button-toggle>
     </mat-gri-tile>

推荐答案

网格的DOM结构妨碍了切换组.您可以通过将组添加为独立元素并将组分配给控制器中的每个按钮来解决此问题.例如:

The DOM structure of the grid is getting in the way of the toggle group. You can get around that by adding the group as a standalone element, and assigning the group to each button in your controller. For example:

<mat-grid-list cols="3">
  <mat-grid-tile>
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
  </mat-grid-tile>
  <mat-grid-tile>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
  </mat-grid-tile>
  <mat-grid-tile>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
  </mat-grid-tile>
</mat-grid-list>
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
</mat-button-toggle-group>


import { Component, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material';

@Component({
  selector: 'button-toggle-overview-example',
  templateUrl: 'button-toggle-overview-example.html',
  styleUrls: ['button-toggle-overview-example.css'],
})
export class ButtonToggleOverviewExample {
  @ViewChild(MatButtonToggleGroup) group: MatButtonToggleGroup;
  @ViewChildren(MatButtonToggle) toggles: QueryList<MatButtonToggle>;
  ngAfterViewInit() {
    setTimeout(() => {
      this.toggles.forEach(toggle => toggle.buttonToggleGroup = this.group);
    });
  }
}

stackblitz示例为这里.

A stackblitz example is here.

这篇关于在mat-grid内使用mat-button-toggle-group的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！