From dd37acffb6f35eead9ffcc89348466e7df3fdd6c Mon Sep 17 00:00:00 2001
From: Austin <amcdaniel2@gmail.com>
Date: Fri, 8 Sep 2017 16:27:45 -0500
Subject: [PATCH] Add complex tabs example (#6295)

* demos(tabs): add advanced demo for tabs

* demo(tabs): update example module
---
 src/material-examples/example-module.ts       |  7 ++-
 .../tabs-template-label-example.css           |  8 ++-
 .../tabs-template-label-example.html          | 49 ++++++++++++++++++-
 .../tabs-template-label-example.ts            |  3 +-
 4 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts
index 0c6bdad9b54..1a67aed7c9f 100644
--- a/src/material-examples/example-module.ts
+++ b/src/material-examples/example-module.ts
@@ -455,6 +455,11 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: null,
     selectorName: null
   },
+  {
+    'table-basic': {
+    title: 'Basic table',
+    component: TableBasicExample,
+  },
   'stepper-overview': {
     title: 'Stepper overview',
     component: StepperOverviewExample,
@@ -504,7 +509,7 @@ export const EXAMPLE_COMPONENTS = {
     selectorName: null
   },
   'tabs-template-label': {
-    title: 'Coming soon!',
+    title: 'Complex Example',
     component: TabsTemplateLabelExample,
     additionalFiles: null,
     selectorName: null
diff --git a/src/material-examples/tabs-template-label/tabs-template-label-example.css b/src/material-examples/tabs-template-label/tabs-template-label-example.css
index 7432308753e..804a0949ef8 100644
--- a/src/material-examples/tabs-template-label/tabs-template-label-example.css
+++ b/src/material-examples/tabs-template-label/tabs-template-label-example.css
@@ -1 +1,7 @@
-/** No CSS for this example */
+.demo-tab-group {
+  border: 1px solid #e8e8e8;
+}
+
+.demo-tab-content {
+  padding: 16px;
+}
\ No newline at end of file
diff --git a/src/material-examples/tabs-template-label/tabs-template-label-example.html b/src/material-examples/tabs-template-label/tabs-template-label-example.html
index bde67b8e913..75b5b19dafa 100644
--- a/src/material-examples/tabs-template-label/tabs-template-label-example.html
+++ b/src/material-examples/tabs-template-label/tabs-template-label-example.html
@@ -1 +1,48 @@
-More examples coming soon!
+<md-tab-group class="demo-tab-group">
+  <md-tab label="Tab 1">
+    <div class="demo-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.
+    </div>
+  </md-tab>
+  <md-tab label="Tab 2">
+    <ng-template md-tab-label>
+      ⭐
+    </ng-template>
+    <div class="demo-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.
+    </div>  
+  </md-tab>
+  <md-tab label="Tab 3" disabled>
+    No content  
+  </md-tab>
+  <md-tab label="Tab 4">
+   <div class="demo-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.
+      <br />
+      <br />
+      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.
+    </div>  
+  </md-tab>
+  <md-tab label="Tab 5">
+    No content  
+  </md-tab>
+  <md-tab label="Tab 6">
+    No content  
+  </md-tab>
+</md-tab-group>
\ No newline at end of file
diff --git a/src/material-examples/tabs-template-label/tabs-template-label-example.ts b/src/material-examples/tabs-template-label/tabs-template-label-example.ts
index fe7d79d6887..0f103327b9a 100644
--- a/src/material-examples/tabs-template-label/tabs-template-label-example.ts
+++ b/src/material-examples/tabs-template-label/tabs-template-label-example.ts
@@ -1,10 +1,11 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Coming soon!
+ * @title Complex Example
  */
 @Component({
   selector: 'tabs-template-label-example',
   templateUrl: 'tabs-template-label-example.html',
+  styleUrls: ['./tabs-template-label-example.css']
 })
 export class TabsTemplateLabelExample {}