skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(tabs): adjust tabs docs for examples (#11721)

Browse Source
This commit is contained in:
Andrew Seguin
2018-06-08 14:31:07 -07:00
committed by GitHub
parent 0b4b2681dc
commit bb30888976
4 changed files with 1 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/tabs/tabs.md
+1 -1
View File
@@ -6,7 +6,7 @@ of the header, pagination controls appear to let the user scroll left and right
The active tab may be set using the `selectedIndex` input or when the user selects one of the
tab labels in the header.
<!-- example(tabs-overview) -->
<!-- example(tab-group-basic) -->
### Events
src/material-examples/tabs-template-label/tabs-template-label-example.css
-7
View File
@@ -1,7 +0,0 @@
.demo-tab-group {
border: 1px solid #e8e8e8;
}
.demo-tab-content {
padding: 16px;
}
src/material-examples/tabs-template-label/tabs-template-label-example.html
-119
View File
@@ -1,119 +0,0 @@
<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>
src/material-examples/tabs-template-label/tabs-template-label-example.ts
-11
View File
@@ -1,11 +0,0 @@
import {Component} from '@angular/core';
/**
* @title Complex Example
*/
@Component({
selector: 'tabs-template-label-example',
templateUrl: 'tabs-template-label-example.html',
styleUrls: ['./tabs-template-label-example.css']
})
export class TabsTemplateLabelExample {}