Skip to content

Commit 8ec3e4b

Browse files
josephperrottjosephperrott
committed
Remove data url from progress-bar.
1 parent 9335224 commit 8ec3e4b

File tree

7 files changed

+58
-413
lines changed

7 files changed

+58
-413
lines changed

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

Lines changed: 21 additions & 279 deletions
Original file line numberDiff line numberDiff line change
@@ -1,290 +1,32 @@
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>
1+
<mat-tab-group>
2+
<mat-tab label="Tab 1" disabled>Content 1</mat-tab>
3+
<mat-tab label="Tab 2">Content 2</mat-tab>
4+
</mat-tab-group>
5+
6+
<nav mat-tab-nav-bar>
7+
<a mat-tab-link
8+
routerLink="1">
9+
<span class="step-number">1</span>
10+
</a>
11+
<a mat-tab-link
12+
routerLink="2"
13+
disabled>
14+
<span class="step-number">2</span>
15+
</a>
16+
</nav>
717

818
<div class="demo-nav-bar">
9-
<nav mat-tab-nav-bar aria-label="weather navigation links" [backgroundColor]="tabNavBackground">
19+
<nav mat-tab-nav-bar aria-label="weather navigation links">
1020
<a mat-tab-link
1121
*ngFor="let tabLink of tabLinks; let i = index"
12-
[routerLink]="tabLink.link"
13-
routerLinkActive #rla="routerLinkActive"
14-
[active]="rla.isActive">
22+
routerLink="tabLink.link">
1523
{{tabLink.label}}
1624
</a>
1725
<a mat-tab-link disabled>Disabled Link</a>
1826
</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="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-
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
93-
</mat-form-field>
94-
<br><br>
95-
<button mat-raised-button
96-
[disabled]="dynamicTabs.length == 1"
97-
(click)="deleteTab(tab)">
98-
Delete Tab
99-
</button>
100-
</div>
101-
</mat-tab>
102-
</mat-tab-group>
10327
</div>
10428

105-
<h1>Tab Group Demo - Dynamic Height</h1>
10629

107-
<mat-tab-group class="demo-tab-group" dynamicHeight>
108-
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
109-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
110-
<div class="tab-content">
111-
{{tab.content}}
112-
<br>
113-
<br>
114-
<div *ngIf="tab.extraContent">
115-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
116-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
117-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
118-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
119-
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
120-
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
121-
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
122-
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
123-
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
124-
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
125-
orci posuere, nec luctus mauris semper.
126-
<br>
127-
<br>
128-
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
129-
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
130-
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
131-
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
132-
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
133-
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
134-
<br>
135-
<br>
136-
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
137-
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
138-
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
139-
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
140-
</div>
141-
<br>
142-
<br>
143-
<mat-form-field>
144-
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
145-
</mat-form-field>
146-
</div>
147-
</mat-tab>
148-
</mat-tab-group>
149-
150-
151-
<h1>Tab Group Demo - Fixed Height</h1>
152-
153-
<mat-tab-group class="demo-tab-group" style="height: 220px">
154-
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
155-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
156-
<div class="tab-content">
157-
{{tab.content}}
158-
<br>
159-
<br>
160-
<div *ngIf="tab.extraContent">
161-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
162-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
163-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
164-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
165-
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
166-
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
167-
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
168-
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
169-
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
170-
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
171-
orci posuere, nec luctus mauris semper.
172-
<br>
173-
<br>
174-
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
175-
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
176-
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
177-
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
178-
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
179-
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
180-
<br>
181-
<br>
182-
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
183-
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
184-
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
185-
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
186-
</div>
187-
<br>
188-
<br>
189-
<mat-form-field>
190-
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
191-
</mat-form-field>
192-
</div>
193-
</mat-tab>
194-
</mat-tab-group>
195-
196-
<h1>Stretched Tabs</h1>
197-
198-
<mat-tab-group class="demo-tab-group" style="height: 200px" mat-stretch-tabs>
199-
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
200-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
201-
<div class="tab-content">
202-
{{tab.content}}
203-
</div>
204-
</mat-tab>
205-
</mat-tab-group>
206-
207-
208-
<h1>Async Tabs</h1>
209-
210-
<mat-tab-group class="demo-tab-group">
211-
<mat-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i == 1">
212-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
213-
214-
<div class="tab-content">
215-
{{tab.content}}
216-
<br>
217-
<br>
218-
<br>
219-
<mat-form-field>
220-
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
221-
</mat-form-field>
222-
</div>
223-
</mat-tab>
224-
</mat-tab-group>
225-
226-
<!-- Simple tabs api -->
227-
<h1>Tabs with simplified api</h1>
228-
<mat-tab-group class="demo-tab-group">
229-
<mat-tab label="Earth">
230-
<div class="tab-content">
231-
This tab is about the Earth!
232-
</div>
233-
</mat-tab>
234-
<mat-tab label="Fire">
235-
This tab is about combustion!
236-
</mat-tab>
237-
</mat-tab-group>
238-
239-
<h1>Inverted tabs</h1>
240-
<mat-tab-group class="demo-tab-group" headerPosition="below">
241-
<mat-tab label="Earth">
242-
<div class="tab-content">
243-
This tab is about the Earth!
244-
</div>
245-
</mat-tab>
246-
<mat-tab label="Fire">
247-
<div class="tab-content">
248-
This tab is about combustion!
249-
</div>
250-
</mat-tab>
251-
</mat-tab-group>
252-
253-
<h1>Accent tabs</h1>
254-
<mat-tab-group class="demo-tab-group" color="accent">
255-
<mat-tab label="Earth">
256-
<div class="tab-content">
257-
This tab is about the Earth!
258-
</div>
259-
</mat-tab>
260-
<mat-tab label="Fire">
261-
<div class="tab-content">
262-
This tab is about combustion!
263-
</div>
264-
</mat-tab>
265-
</mat-tab-group>
266-
267-
<h1>Tabs with background color</h1>
268-
<mat-tab-group class="demo-tab-group" backgroundColor="primary" color="accent">
269-
<mat-tab label="Earth">
270-
<div class="tab-content">
271-
This tab is about the Earth!
272-
</div>
273-
</mat-tab>
274-
<mat-tab label="Fire">
275-
<div class="tab-content">
276-
This tab is about combustion!
277-
</div>
278-
</mat-tab>
279-
</mat-tab-group>
280-
281-
<h1>Tabs with autosize textarea</h1>
282-
<mat-tab-group class="demo-tab-group">
283-
<mat-tab label="Tab 1">
284-
<div class="tab-content">
285-
<mat-form-field>
286-
<textarea matInput placeholder="Autosize textarea" matTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
287-
</mat-form-field>
288-
</div>
289-
</mat-tab>
290-
</mat-tab-group>
30+
<!-- Copyright 2017 Google Inc. All Rights Reserved.
31+
Use of this source code is governed by an MIT-style license that
32+
can be found in the LICENSE file at http://angular.io/license -->

0 commit comments

Comments
 (0)