[英]Use mat-button-toggle-group inside a mat-grid
我有 5 個按鈕占據mat-grid
5 列。 這些按鈕應該像切換按鈕一樣,並且所有 5 個按鈕都應該屬於一個組。
我嘗試用mat-button-toggle-group
封閉mat-grid
,但仍然無法正常工作。
任何幫助深表感謝。
代碼 :
<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 結構妨礙了切換組。 您可以通過將組添加為獨立元素並將該組分配給控制器中的每個按鈕來解決這個問題。 例如:
<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 示例是here 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.