mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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.
This commit is contained in:
Aaron Lewing
committed by
tinayuangao
tinayuangao
parent
6d4413ff23
commit
e7b697a37d
@@ -1,48 +1,119 @@
|
||||
<mat-tab-group class="demo-tab-group">
|
||||
<mat-tab label="Tab 1">
|
||||
<div class="demo-tab-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 2">
|
||||
<ng-template mat-tab-label>
|
||||
⭐
|
||||
</ng-template>
|
||||
<div class="demo-tab-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 3" disabled>
|
||||
No content
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 4">
|
||||
<div class="demo-tab-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
<br />
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 5">
|
||||
No content
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 6">
|
||||
No content
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<h2 class="example-h2">Tabs with text labels</h2>
|
||||
<mat-tab-group class="demo-tab-group">
|
||||
<mat-tab label="Tab 1">
|
||||
<div class="demo-tab-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 2">
|
||||
<div class="demo-tab-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 3" disabled>
|
||||
No content
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 4">
|
||||
<div class="demo-tab-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
<br />
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 5">
|
||||
No content
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 6">
|
||||
No content
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<h2 class="example-h2">Tabs with icon labels</h2>
|
||||
<mat-tab-group class="demo-tab-group">
|
||||
<mat-tab label="Tab 1">
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>security</mat-icon>
|
||||
</ng-template>
|
||||
<div class="demo-tab-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 2">
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</ng-template>
|
||||
<div class="demo-tab-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 3" disabled>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>block</mat-icon>
|
||||
</ng-template>
|
||||
No content
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 4">
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>loop</mat-icon>
|
||||
</ng-template>
|
||||
<div class="demo-tab-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
<br />
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
|
||||
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
|
||||
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
|
||||
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
|
||||
orci enim rutrum enim, vel tempor sapien arcu a tellus.
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 5">
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>build</mat-icon>
|
||||
</ng-template>
|
||||
No content
|
||||
</mat-tab>
|
||||
<mat-tab label="Tab 6">
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>thumb_down</mat-icon>
|
||||
</ng-template>
|
||||
No content
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
Reference in New Issue
Block a user