Skip to content

Commit 0119604

Browse files
crisbetocrisbeto
committed
master - aa2236820 feat(tabs): support pagination in nav bar (#16055)
1 parent 4ec9fdc commit 0119604

20 files changed

+101
-42
lines changed

‎bundles/material-examples.umd.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5586,11 +5586,14 @@
55865586
TabNavBarBasicExample.prototype.toggleBackground = function () {
55875587
this.background = this.background ? '' : 'primary';
55885588
};
5589+
TabNavBarBasicExample.prototype.addLink = function () {
5590+
this.links.push("Link " + (this.links.length + 1));
5591+
};
55895592
TabNavBarBasicExample = tslib_1.__decorate([
55905593
core.Component({
55915594
selector: 'tab-nav-bar-basic-example',
5592-
template: "<button mat-raised-button\n class=\"example-action-button\"\n (click)=\"toggleBackground()\">\n Toggle background\n</button>\n\n<nav mat-tab-nav-bar [backgroundColor]=\"background\">\n <a mat-tab-link *ngFor=\"let link of links\"\n (click)=\"activeLink = link\"\n [active]=\"activeLink == link\"> {{link}} </a>\n <a mat-tab-link disabled>Disabled Link</a>\n</nav>\n",
5593-
styles: [".example-action-button {\n margin-bottom: 8px;\n}\n"]
5595+
template: "<nav mat-tab-nav-bar [backgroundColor]=\"background\">\n <a mat-tab-link *ngFor=\"let link of links\"\n (click)=\"activeLink = link\"\n [active]=\"activeLink == link\"> {{link}} </a>\n <a mat-tab-link disabled>Disabled Link</a>\n</nav>\n\n<button mat-raised-button class=\"example-action-button\" (click)=\"toggleBackground()\">\n Toggle background\n</button>\n<button mat-raised-button class=\"example-action-button\" (click)=\"addLink()\">\n Add link\n</button>\n",
5596+
styles: [".example-action-button {\n margin-top: 8px;\n margin-right: 8px;\n}\n"]
55945597
})
55955598
], TabNavBarBasicExample);
55965599
return TabNavBarBasicExample;

‎bundles/material-examples.umd.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bundles/material-examples.umd.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bundles/material-examples.umd.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs-content/api-docs/material-tabs.html

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -423,7 +423,7 @@ <h4 id="MatTabNav" class="docs-header-link docs-api-h4 docs-api-class-name">
423423
<code>color: ThemePalette</code>
424424
</p>
425425
</td>
426-
<td class="docs-api-property-description"><p>Theme color palette for the component.</p>
426+
<td class="docs-api-property-description"><p>Theme color of the nav bar.</p>
427427
</td>
428428
</tr>
429429

@@ -434,10 +434,10 @@ <h4 id="MatTabNav" class="docs-header-link docs-api-h4 docs-api-class-name">
434434
<tr class="docs-api-properties-row">
435435
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">
436436
@Input()</div><p class="docs-api-property-name">
437-
<code>disableRipple: boolean</code>
437+
<code>disableRipple: any</code>
438438
</p>
439439
</td>
440-
<td class="docs-api-property-description"><p>Whether ripples are disabled.</p>
440+
<td class="docs-api-property-description"><p>Whether the ripple effect is disabled or not.</p>
441441
</td>
442442
</tr>
443443

@@ -470,7 +470,7 @@ <h5 class="docs-api-h5 docs-api-method-header">Methods</h5>
470470
<tr class="docs-api-method-parameter-row">
471471
<td class="docs-api-method-parameter-cell">
472472
<p class="docs-api-method-parameter-name">
473-
element</p>
473+
_element<span class="docs-api-method-parameter-optional-marker">?</span></p>
474474
<code class="docs-api-method-parameter-type">ElementRef&lt;any&gt;</code>
475475
</td>
476476
<td class="docs-api-method-parameter-description-cell">
@@ -551,10 +551,35 @@ <h4 id="MatTabLink" class="docs-header-link docs-api-h4 docs-api-class-name">
551551

552552

553553

554+
555+
556+
<tr class="docs-api-properties-row">
557+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
558+
<code>elementRef: ElementRef</code>
559+
</p>
560+
</td>
561+
<td class="docs-api-property-description"></td>
562+
</tr>
563+
564+
565+
554566
</table>
555567

556568

569+
<h5 class="docs-api-h5 docs-api-method-header">Methods</h5>
570+
571+
557572

573+
<table class="docs-api-method-table">
574+
<thead>
575+
<tr class="docs-api-method-name-row">
576+
<th colspan="2" class="docs-api-method-name-cell">focus
577+
</th>
578+
</tr>
579+
</thead></table>
580+
581+
582+
558583

559584

560585

‎docs-content/examples-highlighted/tab-nav-bar-basic-example-css.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
<span class="hljs-selector-class">.example-action-button</span> {
2-
<span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">8px</span>;
2+
<span class="hljs-attribute">margin-top</span>: <span class="hljs-number">8px</span>;
3+
<span class="hljs-attribute">margin-right</span>: <span class="hljs-number">8px</span>;
34
}

‎docs-content/examples-highlighted/tab-nav-bar-basic-example-html.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-raised-button</span>
2-
<span class="hljs-attr">class</span>=<span class="hljs-string">"example-action-button"</span>
3-
(<span class="hljs-attr">click</span>)=<span class="hljs-string">"toggleBackground()"</span>&gt;</span>
4-
Toggle background
5-
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
6-
71
<span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">mat-tab-nav-bar</span> [<span class="hljs-attr">backgroundColor</span>]=<span class="hljs-string">"background"</span>&gt;</span>
82
<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">mat-tab-link</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">"let link of links"</span>
93
(<span class="hljs-attr">click</span>)=<span class="hljs-string">"activeLink = link"</span>
104
[<span class="hljs-attr">active</span>]=<span class="hljs-string">"activeLink == link"</span>&gt;</span> {{link}} <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
115
<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">mat-tab-link</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
126
<span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span>
7+
8+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-raised-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-action-button"</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"toggleBackground()"</span>&gt;</span>
9+
Toggle background
10+
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
11+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-raised-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-action-button"</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"addLink()"</span>&gt;</span>
12+
Add link
13+
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

‎docs-content/examples-highlighted/tab-nav-bar-basic-example-ts.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,8 @@
1616
toggleBackground() {
1717
<span class="hljs-keyword">this</span>.background = <span class="hljs-keyword">this</span>.background ? <span class="hljs-string">''</span> : <span class="hljs-string">'primary'</span>;
1818
}
19+
20+
addLink() {
21+
<span class="hljs-keyword">this</span>.links.push(<span class="hljs-string">`Link <span class="hljs-subst">${this.links.length + 1}</span>`</span>);
22+
}
1923
}

‎docs-content/examples-source/tab-nav-bar-basic-example.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.example-action-button {
2-
margin-bottom: 8px;
2+
margin-top: 8px;
3+
margin-right: 8px;
34
}

‎docs-content/examples-source/tab-nav-bar-basic-example.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
<button mat-raised-button
2-
class="example-action-button"
3-
(click)="toggleBackground()">
4-
Toggle background
5-
</button>
6-
71
<nav mat-tab-nav-bar [backgroundColor]="background">
82
<a mat-tab-link *ngFor="let link of links"
93
(click)="activeLink = link"
104
[active]="activeLink == link"> {{link}} </a>
115
<a mat-tab-link disabled>Disabled Link</a>
126
</nav>
7+
8+
<button mat-raised-button class="example-action-button" (click)="toggleBackground()">
9+
Toggle background
10+
</button>
11+
<button mat-raised-button class="example-action-button" (click)="addLink()">
12+
Add link
13+
</button>

‎docs-content/examples-source/tab-nav-bar-basic-example.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,8 @@ export class TabNavBarBasicExample {
1616
toggleBackground() {
1717
this.background = this.background ? '' : 'primary';
1818
}
19+
20+
addLink() {
21+
this.links.push(`Link ${this.links.length + 1}`);
22+
}
1923
}

‎esm2015/tab-nav-bar-basic/tab-nav-bar-basic-example.js

Lines changed: 9 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎esm5/tab-nav-bar-basic/tab-nav-bar-basic-example.js

Lines changed: 6 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples_public_index.metadata.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎fesm2015/material-examples.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7287,12 +7287,18 @@ class TabNavBarBasicExample {
72877287
toggleBackground() {
72887288
this.background = this.background ? '' : 'primary';
72897289
}
7290+
/**
7291+
* @return {?}
7292+
*/
7293+
addLink() {
7294+
this.links.push(`Link ${this.links.length + 1}`);
7295+
}
72907296
}
72917297
TabNavBarBasicExample.decorators = [
72927298
{ type: Component, args: [{
72937299
selector: 'tab-nav-bar-basic-example',
7294-
template: "<button mat-raised-button\n class=\"example-action-button\"\n (click)=\"toggleBackground()\">\n Toggle background\n</button>\n\n<nav mat-tab-nav-bar [backgroundColor]=\"background\">\n <a mat-tab-link *ngFor=\"let link of links\"\n (click)=\"activeLink = link\"\n [active]=\"activeLink == link\"> {{link}} </a>\n <a mat-tab-link disabled>Disabled Link</a>\n</nav>\n",
7295-
styles: [".example-action-button {\n margin-bottom: 8px;\n}\n"]
7300+
template: "<nav mat-tab-nav-bar [backgroundColor]=\"background\">\n <a mat-tab-link *ngFor=\"let link of links\"\n (click)=\"activeLink = link\"\n [active]=\"activeLink == link\"> {{link}} </a>\n <a mat-tab-link disabled>Disabled Link</a>\n</nav>\n\n<button mat-raised-button class=\"example-action-button\" (click)=\"toggleBackground()\">\n Toggle background\n</button>\n<button mat-raised-button class=\"example-action-button\" (click)=\"addLink()\">\n Add link\n</button>\n",
7301+
styles: [".example-action-button {\n margin-top: 8px;\n margin-right: 8px;\n}\n"]
72967302
}] }
72977303
];
72987304

‎fesm2015/material-examples.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)