Использовать mat-button-toggle-group внутри mat-grid - PullRequest
Новая
       42

Использовать mat-button-toggle-group внутри mat-grid

0 голосов
/ 28 мая 2018

У меня есть 5 кнопок, занимающих 5 столбцов mat-grid.Кнопки должны работать как кнопки переключения, и все 5 должны принадлежать одной группе.
Я пытался заключить mat-grid в mat-button-toggle-group, но все еще не работает.
Любая помощь очень ценится.

Код: 

 <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>

1 Ответ

0 голосов
/ 06 июня 2018

Структура DOM сетки мешает группе переключателей.Вы можете обойти это, добавив группу в качестве отдельного элемента и назначив группу каждой кнопке вашего контроллера.Например: 

<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);
    });
  }
}

Пример стекаблика: здесь .

...