Skip to content

Commit e7b697a

Browse files
aaroneouslytinayuangao
aaroneously
authored and
tinayuangao
committed
docs(tabs): tabs examples conform to Material Design guidelines (#8658)
Based on https://material.io/guidelines/components/tabs.html#tabs-content, tabs' labels should not be a mix of text and icons. The example has been modified to include tabs with text and tabs with icons separated into their own cards.
1 parent 6d4413f commit e7b697a

File tree

1 file changed

+119
-48
lines changed

1 file changed

+119
-48
lines changed

‎src/material-examples/tabs-template-label/tabs-template-label-example.html

Lines changed: 119 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,119 @@
1-
<mat-tab-group class="demo-tab-group">
2-
<mat-tab label="Tab 1">
3-
<div class="demo-tab-content">
4-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
5-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
6-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
7-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
8-
orci enim rutrum enim, vel tempor sapien arcu a tellus.
9-
</div>
10-
</mat-tab>
11-
<mat-tab label="Tab 2">
12-
<ng-template mat-tab-label>
13-
⭐
14-
</ng-template>
15-
<div class="demo-tab-content">
16-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
17-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
18-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
19-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
20-
orci enim rutrum enim, vel tempor sapien arcu a tellus.
21-
</div>
22-
</mat-tab>
23-
<mat-tab label="Tab 3" disabled>
24-
No content
25-
</mat-tab>
26-
<mat-tab label="Tab 4">
27-
<div class="demo-tab-content">
28-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
29-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
30-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
31-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
32-
orci enim rutrum enim, vel tempor sapien arcu a tellus.
33-
<br />
34-
<br />
35-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
36-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
37-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
38-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
39-
orci enim rutrum enim, vel tempor sapien arcu a tellus.
40-
</div>
41-
</mat-tab>
42-
<mat-tab label="Tab 5">
43-
No content
44-
</mat-tab>
45-
<mat-tab label="Tab 6">
46-
No content
47-
</mat-tab>
48-
</mat-tab-group>
1+
<mat-card>
2+
<mat-card-content>
3+
<h2 class="example-h2">Tabs with text labels</h2>
4+
<mat-tab-group class="demo-tab-group">
5+
<mat-tab label="Tab 1">
6+
<div class="demo-tab-content">
7+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
8+
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
9+
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
10+
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
11+
orci enim rutrum enim, vel tempor sapien arcu a tellus.
12+
</div>
13+
</mat-tab>
14+
<mat-tab label="Tab 2">
15+
<div class="demo-tab-content">
16+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
17+
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
18+
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
19+
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
20+
orci enim rutrum enim, vel tempor sapien arcu a tellus.
21+
</div>
22+
</mat-tab>
23+
<mat-tab label="Tab 3" disabled>
24+
No content
25+
</mat-tab>
26+
<mat-tab label="Tab 4">
27+
<div class="demo-tab-content">
28+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
29+
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
30+
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
31+
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
32+
orci enim rutrum enim, vel tempor sapien arcu a tellus.
33+
<br />
34+
<br />
35+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
36+
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
37+
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
38+
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
39+
orci enim rutrum enim, vel tempor sapien arcu a tellus.
40+
</div>
41+
</mat-tab>
42+
<mat-tab label="Tab 5">
43+
No content
44+
</mat-tab>
45+
<mat-tab label="Tab 6">
46+
No content
47+
</mat-tab>
48+
</mat-tab-group>
49+
</mat-card-content>
50+
</mat-card>
51+
52+
<mat-card>
53+
<mat-card-content>
54+
<h2 class="example-h2">Tabs with icon labels</h2>
55+
<mat-tab-group class="demo-tab-group">
56+
<mat-tab label="Tab 1">
57+
<ng-template mat-tab-label>
58+
<mat-icon>security</mat-icon>
59+
</ng-template>
60+
<div class="demo-tab-content">
61+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
62+
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
63+
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
64+
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
65+
orci enim rutrum enim, vel tempor sapien arcu a tellus.
66+
</div>
67+
</mat-tab>
68+
<mat-tab label="Tab 2">
69+
<ng-template mat-tab-label>
70+
<mat-icon>attach_file</mat-icon>
71+
</ng-template>
72+
<div class="demo-tab-content">
73+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
74+
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
75+
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
76+
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
77+
orci enim rutrum enim, vel tempor sapien arcu a tellus.
78+
</div>
79+
</mat-tab>
80+
<mat-tab label="Tab 3" disabled>
81+
<ng-template mat-tab-label>
82+
<mat-icon>block</mat-icon>
83+
</ng-template>
84+
No content
85+
</mat-tab>
86+
<mat-tab label="Tab 4">
87+
<ng-template mat-tab-label>
88+
<mat-icon>loop</mat-icon>
89+
</ng-template>
90+
<div class="demo-tab-content">
91+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
92+
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
93+
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
94+
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
95+
orci enim rutrum enim, vel tempor sapien arcu a tellus.
96+
<br />
97+
<br />
98+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
99+
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
100+
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
101+
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
102+
orci enim rutrum enim, vel tempor sapien arcu a tellus.
103+
</div>
104+
</mat-tab>
105+
<mat-tab label="Tab 5">
106+
<ng-template mat-tab-label>
107+
<mat-icon>build</mat-icon>
108+
</ng-template>
109+
No content
110+
</mat-tab>
111+
<mat-tab label="Tab 6">
112+
<ng-template mat-tab-label>
113+
<mat-icon>thumb_down</mat-icon>
114+
</ng-template>
115+
No content
116+
</mat-tab>
117+
</mat-tab-group>
118+
</mat-card-content>
119+
</mat-card>

0 commit comments

Comments
 (0)