Add complex tabs example (#6295)

* demos(tabs): add advanced demo for tabs

* demo(tabs): update example module

Author: amcdnl

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

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;
+}

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>

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 {}