diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html index 3ed1bf215b2b..902009497c67 100644 --- a/src/demo-app/tabs/tabs-demo.html +++ b/src/demo-app/tabs/tabs-demo.html @@ -49,6 +49,59 @@

Tab Group Demo - Dynamic Tabs

+
+ {{tab.content}} +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. + Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. + In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, + feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, + orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius + gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat + diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod + ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim + venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. + Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec + orci posuere, nec luctus mauris semper. +
+
+ Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec + magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. + Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. + Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit + tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed + nisl consectetur, rhoncus sapien sit amet, tempus sapien. +
+
+ Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere + molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, + at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. + Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus. +
+
+
+ + + +

+ +
+
+
+ + +

Tab Group Demo - Dynamic Height

+ + + + +
{{tab.content}}

@@ -84,100 +137,53 @@

Tab Group Demo - Dynamic Tabs

-

- - - -
- -

Tab Group Demo - Dynamic Height

- - - - - {{tab.content}} -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. - Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. - In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, - feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, - orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius - gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat - diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod - ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim - venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. - Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec - orci posuere, nec luctus mauris semper. -
-
- Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec - magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. - Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. - Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit - tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed - nisl consectetur, rhoncus sapien sit amet, tempus sapien. -
-
- Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere - molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, - at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. - Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
-
-
- - -

Tab Group Demo - Fixed Height

- + - {{tab.content}} -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. - Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. - In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, - feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, - orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius - gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat - diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod - ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim - venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. - Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec - orci posuere, nec luctus mauris semper. +
+ {{tab.content}}

- Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec - magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. - Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. - Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit - tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed - nisl consectetur, rhoncus sapien sit amet, tempus sapien. +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. + Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. + In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, + feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, + orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius + gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat + diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod + ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim + venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. + Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec + orci posuere, nec luctus mauris semper. +
+
+ Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec + magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. + Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. + Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit + tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed + nisl consectetur, rhoncus sapien sit amet, tempus sapien. +
+
+ Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere + molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, + at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. + Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus. +


- Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere - molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, - at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. - Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus. + + +
-
-
- - - @@ -186,7 +192,9 @@

Stretched Tabs

- {{tab.content}} +
+ {{tab.content}} +
@@ -196,13 +204,16 @@

Async Tabs

- {{tab.content}} -
-
-
- - - + +
+ {{tab.content}} +
+
+
+ + + +
@@ -210,7 +221,9 @@

Async Tabs

Tabs with simplified api

- This tab is about the Earth! +
+ This tab is about the Earth! +
This tab is about combustion! @@ -220,9 +233,13 @@

Tabs with simplified api

Inverted tabs

- This tab is about the Earth! +
+ This tab is about the Earth! +
- This tab is about combustion! +
+ This tab is about combustion! +
diff --git a/src/demo-app/tabs/tabs-demo.scss b/src/demo-app/tabs/tabs-demo.scss index d10e259e7e5e..4d93d9598cae 100644 --- a/src/demo-app/tabs/tabs-demo.scss +++ b/src/demo-app/tabs/tabs-demo.scss @@ -15,12 +15,10 @@ .demo-tab-group { border: 1px solid #e0e0e0; margin-bottom: 40px; + flex-grow: 1; .mat-tab-header { background: #f9f9f9; } - .mat-tab-body-content { - padding: 12px; - } } tabs-demo .mat-card { @@ -56,3 +54,7 @@ tabs-demo .mat-card { } } } + +.tab-content { + padding: 16px; +} diff --git a/src/lib/tabs/tab-body.scss b/src/lib/tabs/tab-body.scss new file mode 100644 index 000000000000..3e2be2c6f56f --- /dev/null +++ b/src/lib/tabs/tab-body.scss @@ -0,0 +1,3 @@ +.mat-tab-body-content { + height: 100%; +} diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts index b3afc9772b4c..4bc55de22cb6 100644 --- a/src/lib/tabs/tab-body.ts +++ b/src/lib/tabs/tab-body.ts @@ -48,6 +48,7 @@ export type MdTabBodyOriginState = 'left' | 'right'; moduleId: module.id, selector: 'md-tab-body, mat-tab-body', templateUrl: 'tab-body.html', + styleUrls: ['tab-body.css'], host: { '[class.mat-tab-body]': 'true', },