Skip to content

Commit 9cfc32f

Browse files
andrewseguinandrewseguin
authored
chore(tabs): revise examples and demo (#11712)
1 parent 4ee0b87 commit 9cfc32f

38 files changed

+364
-556
lines changed

‎src/demo-app/demo-app/demo-module.ts‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,7 @@ import {SliderDemo} from '../slider/slider-demo';
5555
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
5656
import {StepperDemo} from '../stepper/stepper-demo';
5757
import {TableDemoModule} from '../table/table-demo-module';
58-
import {
59-
Counter,
60-
FoggyTabContent,
61-
RainyTabContent,
62-
SunnyTabContent,
63-
TabsDemo
64-
} from '../tabs/tabs-demo';
58+
import {TabsDemo} from '../tabs/tabs-demo';
6559
import {ToolbarDemo} from '../toolbar/toolbar-demo';
6660
import {TooltipDemo} from '../tooltip/tooltip-demo';
6761
import {TreeDemoModule} from '../tree/tree-demo-module';
@@ -96,7 +90,6 @@ import {DEMO_APP_ROUTES} from './routes';
9690
ChipsDemo,
9791
ConnectedOverlayDemo,
9892
ContentElementDialog,
99-
Counter,
10093
CustomHeader,
10194
DatepickerDemo,
10295
DemoApp,
@@ -105,7 +98,6 @@ import {DEMO_APP_ROUTES} from './routes';
10598
ExampleBottomSheet,
10699
ExpansionDemo,
107100
FocusOriginDemo,
108-
FoggyTabContent,
109101
GesturesDemo,
110102
GridListDemo,
111103
Home,
@@ -123,7 +115,6 @@ import {DEMO_APP_ROUTES} from './routes';
123115
ProgressBarDemo,
124116
ProgressSpinnerDemo,
125117
RadioDemo,
126-
RainyTabContent,
127118
RippleDemo,
128119
ScienceJoke,
129120
ScreenTypeDemo,
@@ -133,7 +124,6 @@ import {DEMO_APP_ROUTES} from './routes';
133124
SliderDemo,
134125
SnackBarDemo,
135126
StepperDemo,
136-
SunnyTabContent,
137127
TabsDemo,
138128
ToolbarDemo,
139129
TooltipDemo,

‎src/demo-app/demo-app/routes.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
4242
import {SliderDemo} from '../slider/slider-demo';
4343
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
4444
import {StepperDemo} from '../stepper/stepper-demo';
45-
import {TABS_DEMO_ROUTES} from '../tabs/routes';
4645
import {TabsDemo} from '../tabs/tabs-demo';
4746
import {ToolbarDemo} from '../toolbar/toolbar-demo';
4847
import {TooltipDemo} from '../tooltip/tooltip-demo';
@@ -95,7 +94,7 @@ export const DEMO_APP_ROUTES: Routes = [
9594
{path: 'snack-bar', component: SnackBarDemo},
9695
{path: 'stepper', component: StepperDemo},
9796
{path: 'table', component: TableDemo},
98-
{path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
97+
{path: 'tabs', component: TabsDemo},
9998
{path: 'toolbar', component: ToolbarDemo},
10099
{path: 'tooltip', component: TooltipDemo},
101100
{path: 'tree', component: TreeDemo},

‎src/demo-app/tabs/routes.ts‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/demo-app/tabs/tabs-demo.html‎

Lines changed: 1 addition & 312 deletions
Original file line numberDiff line numberDiff line change
@@ -1,312 +1 @@
1-
<h1>Tab Nav Bar</h1>
2-
3-
<button mat-button (click)="tabLinks.shift()">Remove tab</button>
4-
<button mat-button (click)="swapTabLinks()">Swap first two</button>
5-
<button mat-button (click)="addToLabel()">Add to labels</button>
6-
<button mat-button (click)="toggleBackground()">Toggle background</button>
7-
8-
<div class="demo-nav-bar">
9-
<nav mat-tab-nav-bar aria-label="weather navigation links" [backgroundColor]="tabNavBackground">
10-
<a mat-tab-link
11-
*ngFor="let tabLink of tabLinks; let i = index"
12-
[routerLink]="tabLink.link"
13-
routerLinkActive #rla="routerLinkActive"
14-
[active]="rla.isActive">
15-
{{tabLink.label}}
16-
</a>
17-
<a mat-tab-link disabled>Disabled Link</a>
18-
</nav>
19-
<router-outlet></router-outlet>
20-
</div>
21-
22-
23-
<h1>Tab Group Demo - Dynamic Tabs</h1>
24-
25-
<div>
26-
Selected tab index:
27-
<mat-form-field>
28-
<input matInput type="number" [(ngModel)]="activeTabIndex">
29-
</mat-form-field>
30-
</div>
31-
32-
<div class="demo-dynamic-tabs">
33-
<mat-card>
34-
<mat-card-title>Add New Tab</mat-card-title>
35-
<mat-card-content>
36-
<mat-checkbox [(ngModel)]="createWithLongContent">
37-
Include extra content
38-
</mat-checkbox>
39-
<mat-checkbox [(ngModel)]="gotoNewTabAfterAdding">
40-
Select after adding
41-
</mat-checkbox>
42-
<div>
43-
Position:
44-
<mat-form-field>
45-
<input matInput type="number" [(ngModel)]="addTabPosition">
46-
</mat-form-field>
47-
</div>
48-
<button mat-raised-button color="primary"
49-
(click)="addTab(createWithLongContent)">
50-
Add
51-
</button>
52-
</mat-card-content>
53-
</mat-card>
54-
55-
<mat-tab-group class="demo-tab-group" dynamicHeight [(selectedIndex)]="activeTabIndex">
56-
<mat-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
57-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
58-
<div class="demo-tab-content">
59-
{{tab.content}}
60-
<br>
61-
<br>
62-
<div *ngIf="tab.extraContent">
63-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
64-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
65-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
66-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
67-
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
68-
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
69-
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
70-
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
71-
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
72-
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
73-
orci posuere, nec luctus mauris semper.
74-
<br>
75-
<br>
76-
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
77-
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
78-
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
79-
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
80-
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
81-
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
82-
<br>
83-
<br>
84-
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
85-
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
86-
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
87-
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
88-
</div>
89-
<br>
90-
<br>
91-
<mat-form-field>
92-
<mat-label>Tab label</mat-label>
93-
<input matInput [(ngModel)]="tab.label">
94-
</mat-form-field>
95-
<br><br>
96-
<button mat-raised-button
97-
[disabled]="dynamicTabs.length === 1"
98-
(click)="deleteTab(tab)">
99-
Delete Tab
100-
</button>
101-
</div>
102-
</mat-tab>
103-
</mat-tab-group>
104-
</div>
105-
106-
<h1>Tab Group Demo - Dynamic Height</h1>
107-
108-
<mat-tab-group class="demo-tab-group" dynamicHeight>
109-
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
110-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
111-
<div class="demo-tab-content">
112-
{{tab.content}}
113-
<br>
114-
<br>
115-
<div *ngIf="tab.extraContent">
116-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
117-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
118-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
119-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
120-
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
121-
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
122-
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
123-
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
124-
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
125-
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
126-
orci posuere, nec luctus mauris semper.
127-
<br>
128-
<br>
129-
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
130-
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
131-
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
132-
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
133-
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
134-
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
135-
<br>
136-
<br>
137-
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
138-
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
139-
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
140-
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
141-
</div>
142-
<br>
143-
<br>
144-
<mat-form-field>
145-
<mat-label>Tab label</mat-label>
146-
<input matInput [(ngModel)]="tab.label">
147-
</mat-form-field>
148-
</div>
149-
</mat-tab>
150-
</mat-tab-group>
151-
152-
153-
<h1>Tab Group Demo - Fixed Height</h1>
154-
155-
<mat-tab-group class="demo-tab-group" style="height: 220px">
156-
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
157-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
158-
<div class="demo-tab-content">
159-
{{tab.content}}
160-
<br>
161-
<br>
162-
<div *ngIf="tab.extraContent">
163-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
164-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
165-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
166-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
167-
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
168-
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
169-
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
170-
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
171-
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
172-
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
173-
orci posuere, nec luctus mauris semper.
174-
<br>
175-
<br>
176-
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
177-
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
178-
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
179-
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
180-
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
181-
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
182-
<br>
183-
<br>
184-
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
185-
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
186-
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
187-
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
188-
</div>
189-
<br>
190-
<br>
191-
<mat-form-field>
192-
<mat-label>Tab label</mat-label>
193-
<input matInput [(ngModel)]="tab.label">
194-
</mat-form-field>
195-
</div>
196-
</mat-tab>
197-
</mat-tab-group>
198-
199-
<h1>Stretched Tabs</h1>
200-
201-
<mat-tab-group class="demo-tab-group" style="height: 200px" mat-stretch-tabs>
202-
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
203-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
204-
<div class="demo-tab-content">
205-
{{tab.content}}
206-
</div>
207-
</mat-tab>
208-
</mat-tab-group>
209-
210-
211-
<h1>Async Tabs</h1>
212-
213-
<mat-tab-group class="demo-tab-group">
214-
<mat-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i === 1">
215-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
216-
217-
<div class="demo-tab-content">
218-
{{tab.content}}
219-
<br>
220-
<br>
221-
<br>
222-
<mat-form-field>
223-
<mat-label>Tab label</mat-label>
224-
<input matInput [(ngModel)]="tab.label">
225-
</mat-form-field>
226-
</div>
227-
</mat-tab>
228-
</mat-tab-group>
229-
230-
<!-- Simple tabs api -->
231-
<h1>Tabs with simplified api</h1>
232-
<mat-tab-group class="demo-tab-group">
233-
<mat-tab label="Earth">
234-
<div class="demo-tab-content">
235-
This tab is about the Earth!
236-
</div>
237-
</mat-tab>
238-
<mat-tab label="Fire">
239-
This tab is about combustion!
240-
</mat-tab>
241-
</mat-tab-group>
242-
243-
<h1>Inverted tabs</h1>
244-
<mat-tab-group class="demo-tab-group" headerPosition="below">
245-
<mat-tab label="Earth">
246-
<div class="demo-tab-content">
247-
This tab is about the Earth!
248-
</div>
249-
</mat-tab>
250-
<mat-tab label="Fire">
251-
<div class="demo-tab-content">
252-
This tab is about combustion!
253-
</div>
254-
</mat-tab>
255-
</mat-tab-group>
256-
257-
<h1>Accent tabs</h1>
258-
<mat-tab-group class="demo-tab-group" color="accent">
259-
<mat-tab label="Earth">
260-
<div class="demo-tab-content">
261-
This tab is about the Earth!
262-
</div>
263-
</mat-tab>
264-
<mat-tab label="Fire">
265-
<div class="demo-tab-content">
266-
This tab is about combustion!
267-
</div>
268-
</mat-tab>
269-
</mat-tab-group>
270-
271-
<h1>Tabs with background color</h1>
272-
<mat-tab-group class="demo-tab-group" backgroundColor="primary" color="accent">
273-
<mat-tab label="Earth">
274-
<div class="demo-tab-content">
275-
This tab is about the Earth!
276-
</div>
277-
</mat-tab>
278-
<mat-tab label="Fire">
279-
<div class="demo-tab-content">
280-
This tab is about combustion!
281-
</div>
282-
</mat-tab>
283-
</mat-tab-group>
284-
285-
<h1>Tabs with autosize textarea</h1>
286-
<mat-tab-group class="demo-tab-group">
287-
<mat-tab label="Tab 1">
288-
<div class="demo-tab-content">
289-
<mat-form-field>
290-
<mat-label>Autosize textarea</mat-label>
291-
<textarea matInput cdkTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
292-
</mat-form-field>
293-
</div>
294-
</mat-tab>
295-
</mat-tab-group>
296-
297-
<h1>Lazy Loaded Tabs</h1>
298-
<mat-tab-group>
299-
<mat-tab label="First">
300-
<ng-template matTabContent>
301-
<counter></counter>
302-
</ng-template>
303-
</mat-tab>
304-
<mat-tab label="Second">
305-
<ng-template matTabContent>
306-
<counter></counter>
307-
</ng-template>
308-
</mat-tab>
309-
<mat-tab label="Third">
310-
<counter></counter>
311-
</mat-tab>
312-
</mat-tab-group>
1+
<material-example-list [ids]="examples"></material-example-list>

0 commit comments

Comments
 (0)