Skip to content

Commit 8acf8a4

Browse files
zarendzarend
committed
docs(material/tabs): switch examples and demo to MDC
Switches the tabs live examples and demo to use MDC.
1 parent cb78009 commit 8acf8a4

18 files changed

+96
-52
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,7 @@
191191
/src/dev-app/legacy-paginator/** @crisbeto
192192
/src/dev-app/legacy-select/** @crisbeto
193193
/src/dev-app/legacy-snack-bar/** @andrewseguin
194+
/src/dev-app/legacy-tabs/** @andrewseguin
194195
/src/dev-app/legacy-table/** @andrewseguin
195196
/src/dev-app/legacy-tooltip/** @crisbeto
196197
/src/dev-app/list/** @andrewseguin @crisbeto @devversion

‎src/components-examples/material/tabs/BUILD.bazel

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ ng_module(
1515
deps = [
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
18+
"//src/material/button",
1819
"//src/material/button-toggle",
20+
"//src/material/checkbox",
1921
"//src/material/icon",
20-
"//src/material/legacy-button",
21-
"//src/material/legacy-checkbox",
22-
"//src/material/legacy-input",
23-
"//src/material/legacy-tabs",
24-
"//src/material/legacy-tabs/testing",
22+
"//src/material/input",
23+
"//src/material/tabs",
24+
"//src/material/tabs/testing",
2525
"@npm//@angular/forms",
2626
"@npm//@angular/platform-browser",
2727
"@npm//@angular/platform-browser-dynamic",
@@ -45,8 +45,8 @@ ng_test_library(
4545
":tabs",
4646
"//src/cdk/testing",
4747
"//src/cdk/testing/testbed",
48-
"//src/material/legacy-tabs",
49-
"//src/material/legacy-tabs/testing",
48+
"//src/material/tabs",
49+
"//src/material/tabs/testing",
5050
"@npm//@angular/platform-browser",
5151
"@npm//@angular/platform-browser-dynamic",
5252
],

‎src/components-examples/material/tabs/index.ts

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {CommonModule} from '@angular/common';
22
import {NgModule} from '@angular/core';
33
import {ReactiveFormsModule} from '@angular/forms';
4-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
4+
import {MatButtonModule} from '@angular/material/button';
55
import {MatButtonToggleModule} from '@angular/material/button-toggle';
6-
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
6+
import {MatCheckboxModule} from '@angular/material/checkbox';
77
import {MatIconModule} from '@angular/material/icon';
8-
import {MatLegacyInputModule} from '@angular/material/legacy-input';
9-
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
8+
import {MatInputModule} from '@angular/material/input';
9+
import {MatTabsModule} from '@angular/material/tabs';
1010
import {TabGroupAlignExample} from './tab-group-align/tab-group-align-example';
1111
import {TabGroupAnimationsExample} from './tab-group-animations/tab-group-animations-example';
1212
import {TabGroupAsyncExample} from './tab-group-async/tab-group-async-example';
@@ -21,6 +21,9 @@ import {TabGroupPreserveContentExample} from './tab-group-preserve-content/tab-g
2121
import {TabGroupStretchedExample} from './tab-group-stretched/tab-group-stretched-example';
2222
import {TabGroupThemeExample} from './tab-group-theme/tab-group-theme-example';
2323
import {TabNavBarBasicExample} from './tab-nav-bar-basic/tab-nav-bar-basic-example';
24+
import {TabGroupPaginatedExample} from './tab-group-paginated/tab-group-paginated-example';
25+
import {TabGroupInvertedExample} from './tab-group-inverted/tab-group-inverted-example';
26+
import {TabGroupInkBarExample} from './tab-group-ink-bar/tab-group-ink-bar-example';
2427

2528
export {
2629
TabGroupAlignExample,
@@ -37,6 +40,9 @@ export {
3740
TabGroupThemeExample,
3841
TabNavBarBasicExample,
3942
TabGroupPreserveContentExample,
43+
TabGroupPaginatedExample,
44+
TabGroupInvertedExample,
45+
TabGroupInkBarExample,
4046
};
4147

4248
const EXAMPLES = [
@@ -54,17 +60,20 @@ const EXAMPLES = [
5460
TabGroupThemeExample,
5561
TabNavBarBasicExample,
5662
TabGroupPreserveContentExample,
63+
TabGroupPaginatedExample,
64+
TabGroupInvertedExample,
65+
TabGroupInkBarExample,
5766
];
5867

5968
@NgModule({
6069
imports: [
6170
CommonModule,
62-
MatLegacyButtonModule,
71+
MatButtonModule,
6372
MatButtonToggleModule,
64-
MatLegacyCheckboxModule,
73+
MatCheckboxModule,
6574
MatIconModule,
66-
MatLegacyInputModule,
67-
MatLegacyTabsModule,
75+
MatInputModule,
76+
MatTabsModule,
6877
ReactiveFormsModule,
6978
],
7079
declarations: EXAMPLES,

‎src/components-examples/material/tabs/tab-group-align/tab-group-align-example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!-- #docregion align-start -->
2-
<mat-tab-group mat-align-tabs="start">
2+
<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
33
<!-- #enddocregion align-start -->
44
<mat-tab label="First">Content 1</mat-tab>
55
<mat-tab label="Second">Content 2</mat-tab>
66
<mat-tab label="Third">Content 3</mat-tab>
77
</mat-tab-group>
88

9-
<mat-tab-group mat-align-tabs="center">
9+
<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="center">
1010
<mat-tab label="First">Content 1</mat-tab>
1111
<mat-tab label="Second">Content 2</mat-tab>
1212
<mat-tab label="Third">Content 3</mat-tab>
1313
</mat-tab-group>
1414

15-
<mat-tab-group mat-align-tabs="end">
15+
<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="end">
1616
<mat-tab label="First">Content 1</mat-tab>
1717
<mat-tab label="Second">Content 2</mat-tab>
1818
<mat-tab label="Third">Content 3</mat-tab>

‎src/components-examples/material/tabs/tab-group-ink-bar/tab-group-ink-bar-example.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<mat-tab-group fitInkBarToContent>
2+
<mat-tab label="First">Content 1</mat-tab>
3+
<mat-tab label="Second">Content 2</mat-tab>
4+
<mat-tab label="Third">Content 3</mat-tab>
5+
<mat-tab label="Fourth" disabled>Content 4</mat-tab>
6+
</mat-tab-group>

‎src/components-examples/material/tabs/tab-group-ink-bar/tab-group-ink-bar-example.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Tab group with ink bar fit to content
5+
*/
6+
@Component({
7+
selector: 'tab-group-ink-bar-example',
8+
templateUrl: 'tab-group-ink-bar-example.html',
9+
})
10+
export class TabGroupInkBarExample {}

‎src/components-examples/material/tabs/tab-group-inverted/tab-group-inverted-example.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<mat-tab-group headerPosition="below">
2+
<mat-tab label="First">Content 1</mat-tab>
3+
<mat-tab label="Second">Content 2</mat-tab>
4+
<mat-tab label="Third">Content 3</mat-tab>
5+
</mat-tab-group>

‎src/components-examples/material/tabs/tab-group-inverted/tab-group-inverted-example.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Tab group with inverted tabs
5+
*/
6+
@Component({
7+
selector: 'tab-group-inverted-example',
8+
templateUrl: 'tab-group-inverted-example.html',
9+
})
10+
export class TabGroupInvertedExample {}

‎src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<mat-tab-group>
2+
<mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab>
3+
</mat-tab-group>

‎src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Tab group with paginated tabs
5+
*/
6+
@Component({
7+
selector: 'tab-group-paginated-example',
8+
templateUrl: 'tab-group-paginated-example.html',
9+
})
10+
export class TabGroupPaginatedExample {
11+
lotsOfTabs = new Array(30).fill(0).map((_, index) => `Tab ${index}`);
12+
}

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ ng_module(
5656
"//src/dev-app/legacy-select",
5757
"//src/dev-app/legacy-snack-bar",
5858
"//src/dev-app/legacy-table",
59+
"//src/dev-app/legacy-tabs",
5960
"//src/dev-app/legacy-tooltip",
6061
"//src/dev-app/list",
6162
"//src/dev-app/live-announcer",
@@ -68,7 +69,6 @@ ng_module(
6869
"//src/dev-app/mdc-radio",
6970
"//src/dev-app/mdc-slide-toggle",
7071
"//src/dev-app/mdc-slider",
71-
"//src/dev-app/mdc-tabs",
7272
"//src/dev-app/menu",
7373
"//src/dev-app/menubar",
7474
"//src/dev-app/paginator",

‎src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export class DevAppLayout {
112112
{name: 'MDC Radio', route: '/mdc-radio'},
113113
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
114114
{name: 'MDC Slider', route: '/mdc-slider'},
115-
{name: 'MDC Tabs', route: '/mdc-tabs'},
115+
{name: 'Legacy Tabs', route: '/legacy-tabs'},
116116
{name: 'Legacy Card', route: '/legacy-card'},
117117
{name: 'Legacy Checkbox', route: '/legacy-checkbox'},
118118
{name: 'Legacy Dialog', route: '/legacy-dialog'},

‎src/dev-app/mdc-tabs/BUILD.bazel renamed to ‎src/dev-app/legacy-tabs/BUILD.bazel

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@ load("//tools:defaults.bzl", "ng_module", "sass_binary")
33
package(default_visibility = ["//visibility:public"])
44

55
ng_module(
6-
name = "mdc-tabs",
6+
name = "legacy-tabs",
77
srcs = glob(["**/*.ts"]),
88
assets = [
9-
"mdc-tabs-demo.html",
10-
":mdc_tabs_demo_scss",
9+
"legacy-tabs-demo.html",
10+
":legacy_tabs_demo_scss",
1111
],
1212
deps = [
1313
"//src/material/button-toggle",
14-
"//src/material/tabs",
14+
"//src/material/legacy-tabs",
1515
],
1616
)
1717

1818
sass_binary(
19-
name = "mdc_tabs_demo_scss",
20-
src = "mdc-tabs-demo.scss",
19+
name = "legacy_tabs_demo_scss",
20+
src = "legacy-tabs-demo.scss",
2121
)

‎src/dev-app/mdc-tabs/mdc-tabs-demo.html renamed to ‎src/dev-app/legacy-tabs/legacy-tabs-demo.html

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -91,24 +91,6 @@ <h2>Template labels</h2>
9191
</mat-tab>
9292
</mat-tab-group>
9393

94-
<h2>Ink bar fit to content</h2>
95-
<button (click)="fitInkBarToContent = !fitInkBarToContent"> Toggle Fit To Content </button>
96-
<mat-tab-group [fitInkBarToContent]="fitInkBarToContent">
97-
<mat-tab label="First">Content 1</mat-tab>
98-
<mat-tab label="Second">Content 2</mat-tab>
99-
<mat-tab label="Third">Content 3</mat-tab>
100-
<mat-tab label="Fourth" disabled>Content 4</mat-tab>
101-
</mat-tab-group>
102-
103-
<h2>Ink bar fit to content</h2>
104-
<nav mat-tab-nav-bar [fitInkBarToContent]="fitInkBarToContent" [tabPanel]="tabPanelInkBar">
105-
<a mat-tab-link *ngFor="let link of links"
106-
(click)="activeLink = link"
107-
[active]="activeLink == link">{{link}}</a>
108-
<a mat-tab-link disabled>Disabled Link</a>
109-
</nav>
110-
<mat-tab-nav-panel #tabPanelInkBar></mat-tab-nav-panel>
111-
11294
<h2>Lazy tabs</h2>
11395
<mat-tab-group>
11496
<mat-tab label="One">

‎src/dev-app/mdc-tabs/mdc-tabs-demo.scss renamed to ‎src/dev-app/legacy-tabs/legacy-tabs-demo.scss

File renamed without changes.

‎src/dev-app/mdc-tabs/mdc-tabs-demo.ts renamed to ‎src/dev-app/legacy-tabs/legacy-tabs-demo.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@
77
*/
88

99
import {Component} from '@angular/core';
10-
import {MatTabsModule} from '@angular/material/tabs';
10+
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
1111
import {CommonModule} from '@angular/common';
1212
import {MatButtonToggleModule} from '@angular/material/button-toggle';
1313

1414
@Component({
15-
selector: 'mdc-tabs-demo',
16-
templateUrl: 'mdc-tabs-demo.html',
17-
styleUrls: ['mdc-tabs-demo.css'],
15+
selector: 'legacy-tabs-demo',
16+
templateUrl: 'legacy-tabs-demo.html',
17+
styleUrls: ['legacy-tabs-demo.css'],
1818
standalone: true,
19-
imports: [MatTabsModule, CommonModule, MatButtonToggleModule],
19+
imports: [MatLegacyTabsModule, CommonModule, MatButtonToggleModule],
2020
})
21-
export class MdcTabsDemo {
21+
export class LegacyTabsDemo {
2222
fitInkBarToContent = true;
2323
links = ['First', 'Second', 'Third'];
2424
lotsOfTabs = new Array(30).fill(0).map((_, index) => `Tab ${index}`);

‎src/dev-app/routes.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,8 +222,8 @@ export const DEV_APP_ROUTES: Routes = [
222222
loadComponent: () => import('./legacy-table/legacy-table-demo').then(m => m.LegacyTableDemo),
223223
},
224224
{
225-
path: 'mdc-tabs',
226-
loadComponent: () => import('./mdc-tabs/mdc-tabs-demo').then(m => m.MdcTabsDemo),
225+
path: 'legacy-tabs',
226+
loadComponent: () => import('./legacy-tabs/legacy-tabs-demo').then(m => m.LegacyTabsDemo),
227227
},
228228
{
229229
path: 'legacy-tooltip',

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,9 @@ <h3>Tab group theming</h3>
2020
<tab-group-theme-example></tab-group-theme-example>
2121
<h3>Tab navigation bar basic</h3>
2222
<tab-nav-bar-basic-example></tab-nav-bar-basic-example>
23+
<h3>Paginated Tabs</h3>
24+
<tab-group-paginated-example></tab-group-paginated-example>
25+
<h3>Inverted Tabs</h3>
26+
<tab-group-inverted-example></tab-group-inverted-example>
27+
<h3>Ink bar fit to content</h3>
28+
<tab-group-ink-bar-example></tab-group-ink-bar-example>

0 commit comments

Comments
 (0)