/
tab-group-theme-example.html
27 lines (25 loc) · 1.14 KB
/
tab-group-theme-example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div>
<mat-button-toggle-group #colorToggle="matButtonToggleGroup"
value="primary"
aria-label="Change color">
<mat-button-toggle value="primary">Primary</mat-button-toggle>
<mat-button-toggle value="accent">Accent</mat-button-toggle>
<mat-button-toggle value="warn">Warn</mat-button-toggle>
</mat-button-toggle-group>
<span class="example-button-toggle-label">Color</span>
</div>
<div>
<mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup"
value="primary"
aria-label="Change color">
<mat-button-toggle value="primary">Primary</mat-button-toggle>
<mat-button-toggle value="accent">Accent</mat-button-toggle>
<mat-button-toggle value="warn">Warn</mat-button-toggle>
</mat-button-toggle-group>
<span class="example-button-toggle-label">Background Color</span>
</div>
<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
<mat-tab label="First">Content 1</mat-tab>
<mat-tab label="Second">Content 2</mat-tab>
<mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>