Skip to content

Commit a6aa3e5

Browse files
crisbetocrisbeto
committed
prototype(tabs): create prototype tabs based on MDC web
Adds an implementation of the Angular Material tabs that is based on MDC web. The API is exactly the same, except for a couple of differences: 1. The ink bar has been switched to use MDC's `tab-indicator`. As such the styling and the animation are slightly different. 2. Previously `MatTabLink` used to be a `Directive`, however now it's a `Component`, because we need some extra markup around the content.
1 parent 37086fd commit a6aa3e5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+4028
-211
lines changed

‎src/dev-app/mdc-tabs/mdc-tabs-demo-module.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,16 @@
99
import {NgModule} from '@angular/core';
1010
import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
1111
import {RouterModule} from '@angular/router';
12+
import {CommonModule} from '@angular/common';
1213
import {MdcTabsDemo} from './mdc-tabs-demo';
14+
import {MatButtonToggleModule} from '@angular/material/button-toggle';
1315

1416
@NgModule({
1517
imports: [
1618
MatTabsModule,
1719
RouterModule.forChild([{path: '', component: MdcTabsDemo}]),
20+
CommonModule,
21+
MatButtonToggleModule,
1822
],
1923
declarations: [MdcTabsDemo],
2024
})

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

Lines changed: 113 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,113 @@
1-
<!-- TODO: copy in demo template from existing tabs demo. -->
2-
Not yet implemented.
1+
<div class="mat-typography">
2+
<h2>Paginated tabs</h2>
3+
<mat-tab-group>
4+
<mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab>
5+
</mat-tab-group>
6+
7+
<h2>Themed tabs</h2>
8+
<mat-tab-group [color]="'primary'">
9+
<mat-tab label="First">Content 1</mat-tab>
10+
<mat-tab label="Second">Content 2</mat-tab>
11+
<mat-tab label="Third">Content 3</mat-tab>
12+
<mat-tab label="Fourth" disabled>Content 4</mat-tab>
13+
</mat-tab-group>
14+
15+
<mat-tab-group [color]="'accent'">
16+
<mat-tab label="First">Content 1</mat-tab>
17+
<mat-tab label="Second">Content 2</mat-tab>
18+
<mat-tab label="Third">Content 3</mat-tab>
19+
<mat-tab label="Fourth" disabled>Content 4</mat-tab>
20+
</mat-tab-group>
21+
22+
<mat-tab-group [color]="'warn'">
23+
<mat-tab label="First">Content 1</mat-tab>
24+
<mat-tab label="Second">Content 2</mat-tab>
25+
<mat-tab label="Third">Content 3</mat-tab>
26+
<mat-tab label="Fourth" disabled>Content 4</mat-tab>
27+
</mat-tab-group>
28+
29+
<h2>Stretched tabs</h2>
30+
<mat-tab-group mat-stretch-tabs>
31+
<mat-tab label="First">Content 1</mat-tab>
32+
<mat-tab label="Second">Content 2</mat-tab>
33+
<mat-tab label="Third">Content 3</mat-tab>
34+
</mat-tab-group>
35+
36+
<h2>Aligned tabs</h2>
37+
<mat-tab-group mat-align-tabs="start">
38+
<mat-tab label="First">Content 1</mat-tab>
39+
<mat-tab label="Second">Content 2</mat-tab>
40+
<mat-tab label="Third">Content 3</mat-tab>
41+
</mat-tab-group>
42+
43+
<mat-tab-group mat-align-tabs="center">
44+
<mat-tab label="First">Content 1</mat-tab>
45+
<mat-tab label="Second">Content 2</mat-tab>
46+
<mat-tab label="Third">Content 3</mat-tab>
47+
</mat-tab-group>
48+
49+
<mat-tab-group mat-align-tabs="end">
50+
<mat-tab label="First">Content 1</mat-tab>
51+
<mat-tab label="Second">Content 2</mat-tab>
52+
<mat-tab label="Third">Content 3</mat-tab>
53+
</mat-tab-group>
54+
55+
<h2>Inverted tabs</h2>
56+
<mat-tab-group headerPosition="below">
57+
<mat-tab label="First">Content 1</mat-tab>
58+
<mat-tab label="Second">Content 2</mat-tab>
59+
<mat-tab label="Third">Content 3</mat-tab>
60+
</mat-tab-group>
61+
62+
<h2>Tabs with background color</h2>
63+
<div>
64+
<mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup"
65+
value="primary"
66+
aria-label="Change color">
67+
<mat-button-toggle value="primary">Primary</mat-button-toggle>
68+
<mat-button-toggle value="accent">Accent</mat-button-toggle>
69+
<mat-button-toggle value="warn">Warn</mat-button-toggle>
70+
</mat-button-toggle-group>
71+
</div>
72+
73+
<mat-tab-group [backgroundColor]="backgroundColorToggle.value">
74+
<mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab>
75+
</mat-tab-group>
76+
77+
<h2>Template labels</h2>
78+
79+
<mat-tab-group>
80+
<mat-tab>
81+
<ng-template mat-tab-label>One</ng-template>
82+
First tab's content
83+
</mat-tab>
84+
<mat-tab>
85+
<ng-template mat-tab-label>Two</ng-template>
86+
Second tab's content
87+
</mat-tab>
88+
<mat-tab>
89+
<ng-template mat-tab-label>Three</ng-template>
90+
Third tab's content
91+
</mat-tab>
92+
</mat-tab-group>
93+
94+
<h2>Lazy tabs</h2>
95+
<mat-tab-group>
96+
<mat-tab label="One">
97+
Eager
98+
</mat-tab>
99+
<mat-tab label="Two">
100+
<ng-template matTabContent>
101+
<div class="child">Lazy</div>
102+
</ng-template>
103+
</mat-tab>
104+
</mat-tab-group>
105+
106+
<h2>Tab nav bar</h2>
107+
<nav mat-tab-nav-bar>
108+
<a mat-tab-link *ngFor="let link of links"
109+
(click)="activeLink = link"
110+
[active]="activeLink == link">{{link}}</a>
111+
<a mat-tab-link disabled>Disabled Link</a>
112+
</nav>
113+
</div>

‎src/dev-app/mdc-tabs/mdc-tabs-demo.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
// TODO: copy in demo styles from existing tabs demo.
1+
mat-tab-group {
2+
margin-bottom: 32px;
3+
}

‎src/dev-app/mdc-tabs/mdc-tabs-demo.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,7 @@ import {Component} from '@angular/core';
1515
styleUrls: ['mdc-tabs-demo.css'],
1616
})
1717
export class MdcTabsDemo {
18+
links = ['First', 'Second', 'Third'];
19+
lotsOfTabs = new Array(30).fill(0).map((_, index) => `Tab ${index}`);
20+
activeLink = this.links[0];
1821
}

‎src/e2e-app/mdc-tabs/mdc-tabs-e2e-module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@
77
*/
88

99
import {NgModule} from '@angular/core';
10+
import {MatFormFieldModule} from '@angular/material/form-field';
11+
import {MatInputModule} from '@angular/material/input';
1012
import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
1113
import {MdcTabsE2e} from './mdc-tabs-e2e';
1214

1315
@NgModule({
14-
imports: [MatTabsModule],
16+
imports: [MatTabsModule, MatFormFieldModule, MatInputModule],
1517
declarations: [MdcTabsE2e],
1618
})
1719
export class MdcTabsE2eModule {

‎src/e2e-app/mdc-tabs/mdc-tabs-e2e.html

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,18 @@
1-
<!-- TODO: copy implementation from existing tabs e2e page. -->
1+
<section>
2+
<mat-tab-group>
3+
<mat-tab>
4+
<ng-template mat-tab-label>One</ng-template>
5+
<mat-form-field>
6+
<textarea matInput placeholder="Autosize textarea" cdkTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
7+
</mat-form-field>
8+
</mat-tab>
9+
<mat-tab>
10+
<ng-template mat-tab-label>Two</ng-template>
11+
Second tab's content
12+
</mat-tab>
13+
<mat-tab>
14+
<ng-template mat-tab-label>Three</ng-template>
15+
Third tab's content
16+
</mat-tab>
17+
</mat-tab-group>
18+
</section>

‎src/e2e-app/mdc-tabs/mdc-tabs-e2e.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,4 @@ import {Component} from '@angular/core';
1414
templateUrl: 'mdc-tabs-e2e.html',
1515
})
1616
export class MdcTabsE2e {
17-
// TODO: copy implementation from existing tabs e2e page.
1817
}

‎src/material-experimental/mdc-tabs/BUILD.bazel

Lines changed: 82 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
package(default_visibility = ["//visibility:public"])
22

33
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
4-
load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module")
4+
load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_test_library", "ng_web_test_suite")
55
load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
66

77
ng_module(
@@ -10,12 +10,21 @@ ng_module(
1010
["**/*.ts"],
1111
exclude = ["**/*.spec.ts"],
1212
),
13-
assets = [":tabs_scss"] + glob(["**/*.html"]),
13+
assets = [
14+
":tabs_scss",
15+
":tab-body.css",
16+
":tab-header.css",
17+
":tab-group.css",
18+
":tab-nav-bar/tab-nav-bar.css",
19+
":tab-nav-bar/tab-link.css",
20+
] + glob(["**/*.html"]),
1421
module_name = "@angular/material-experimental/mdc-tabs",
1522
deps = [
1623
"//src/material/core",
24+
"//src/material/tabs",
1725
"@npm//@angular/common",
1826
"@npm//@angular/core",
27+
"@npm//@material/tab-indicator",
1928
],
2029
)
2130

@@ -31,22 +40,85 @@ sass_library(
3140

3241
sass_binary(
3342
name = "tabs_scss",
34-
src = "tabs.scss",
35-
include_paths = [
36-
"external/npm/node_modules",
37-
],
43+
src = "_mdc-tabs.scss",
44+
include_paths = ["external/npm/node_modules"],
3845
deps = [
46+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
3947
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
40-
"//src/material/core:all_themes",
48+
],
49+
)
50+
51+
sass_binary(
52+
name = "mdc_tab_body_scss",
53+
src = "tab-body.scss",
54+
include_paths = ["external/npm/node_modules"],
55+
deps = ["//src/material/core:core_scss_lib"],
56+
)
57+
58+
sass_binary(
59+
name = "mdc_tab_header_scss",
60+
src = "tab-header.scss",
61+
include_paths = ["external/npm/node_modules"],
62+
deps = [":mdc_tabs_scss_lib"],
63+
)
64+
65+
sass_binary(
66+
name = "mdc_tab_group_scss",
67+
src = "tab-group.scss",
68+
include_paths = ["external/npm/node_modules"],
69+
deps = [":mdc_tabs_scss_lib"],
70+
)
71+
72+
sass_binary(
73+
name = "mdc_tab_nav_bar_scss",
74+
src = "tab-nav-bar/tab-nav-bar.scss",
75+
include_paths = ["external/npm/node_modules"],
76+
deps = [":mdc_tabs_scss_lib"],
77+
)
78+
79+
sass_binary(
80+
name = "mdc_tab_link_scss",
81+
src = "tab-nav-bar/tab-link.scss",
82+
include_paths = ["external/npm/node_modules"],
83+
deps = [":mdc_tabs_scss_lib"],
84+
)
85+
86+
ng_test_library(
87+
name = "tabs_tests_lib",
88+
srcs = glob(
89+
["**/*.spec.ts"],
90+
exclude = ["**/*.e2e.spec.ts"],
91+
),
92+
deps = [
93+
":mdc-tabs",
94+
"//src/cdk-experimental/testing",
95+
"//src/cdk-experimental/testing/testbed",
96+
"//src/cdk/bidi",
97+
"//src/cdk/keycodes",
98+
"//src/cdk/observers",
99+
"//src/cdk/portal",
100+
"//src/cdk/scrolling",
101+
"//src/cdk/testing",
102+
"//src/material/core",
103+
"@npm//@angular/common",
104+
"@npm//@angular/platform-browser",
105+
"@npm//rxjs",
106+
],
107+
)
108+
109+
ng_web_test_suite(
110+
name = "unit_tests",
111+
static_files = ["@npm//:node_modules/@material/tab-indicator/dist/mdc.tabIndicator.js"],
112+
deps = [
113+
":tabs_tests_lib",
114+
"//src/material-experimental:mdc_require_config.js",
41115
],
42116
)
43117

44118
ng_e2e_test_library(
45119
name = "e2e_test_sources",
46120
srcs = glob(["**/*.e2e.spec.ts"]),
47-
deps = [
48-
"//src/cdk/private/testing/e2e",
49-
],
121+
deps = ["//src/cdk/private/testing/e2e"],
50122
)
51123

52124
e2e_test_suite(

0 commit comments

Comments
 (0)