update(demo): add GridArea demo

* show demo how to span multiple rows and columns
angular · Dec 9, 2016 · f9dd674 · f9dd674
1 parent ae3a358
commit f9dd674
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 2 deletions.
diff --git a/src/demo-app/app/stack-overflow/DemosStackOverflow.ts b/src/demo-app/app/stack-overflow/DemosStackOverflow.ts
@@ -4,6 +4,7 @@ import {Component} from '@angular/core';
   selector: 'demos-stackoverflow',
   template: `
     <demo-complex-column-ordering></demo-complex-column-ordering>
+    <demo-grid-area-row-span></demo-grid-area-row-span>
   `
 })
 export class DemosStackOverflow { }
@@ -14,11 +15,13 @@ import {MaterialModule}           from "@angular/material";
 import {FlexLayoutModule}         from "../../../lib";        // `gulp build:components` to deploy to node_modules manually
 
 import { DemoComplexColumnOrder } from "./columnOrder.demo";
+import {DemoGridAreaRowSpan} from './gridArea.demo';
 
 @NgModule({
   declarations : [
     DemosStackOverflow,     // used by the Router with the root app component
-    DemoComplexColumnOrder
+    DemoComplexColumnOrder,
+    DemoGridAreaRowSpan
   ],
   imports : [
     CommonModule,

diff --git a/src/demo-app/app/stack-overflow/columnOrder.demo.css b/src/demo-app/app/stack-overflow/columnOrder.demo.css
@@ -31,7 +31,7 @@
   font-weight: bold;
 }
 
-.card-demo md-card
+.card-demo md-card,
 .card-demo md-card-content {
   margin-bottom: 24px;
 }

diff --git a/src/demo-app/app/stack-overflow/gridArea.demo.css b/src/demo-app/app/stack-overflow/gridArea.demo.css
@@ -0,0 +1,29 @@
+.containerX {
+  padding: 5px;
+  border: solid 1px #b6b6b6;
+  box-sizing: content-box !important;
+}
+
+.flexitem {
+  text-align: center;
+  line-height: 100px;
+  margin: 2px;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+.markup {
+  font-size: 0.7em;
+  margin-top: -80px;
+  font-weight: bold;
+}
+
+.card-demo md-card,
+.card-demo md-card-content {
+  margin-bottom: 24px;
+}
+
+.card-demo md-card-footer {
+  left: 24px;
+  margin-bottom: 24px;
+}
diff --git a/src/demo-app/app/stack-overflow/gridArea.demo.ts b/src/demo-app/app/stack-overflow/gridArea.demo.ts
@@ -0,0 +1,43 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'demo-grid-area-row-span',
+  styleUrls : [
+    'gridArea.demo.css',
+    '../demo-app/material2.css'
+  ],
+  template: `
+   <md-card class="card-demo" >
+    <md-card-title> <a href="http://stackoverflow.com/questions/37039029/flex-css-rowspan-2-and-colspan-2" target="_blank">StackOverflow</a></md-card-title>
+    <md-card-subtitle>Grid Area with Column and Row Span... [Click to change direction!]</md-card-subtitle>
+    <md-card-content>
+      <div class="containerX" (click)="toggleDirection()" [fx-layout]="'row'+direction" >
+        <div fx-flex [fx-layout]="'column'">
+          <div class="one   flexitem " fx-flex> A  </div>
+          <div class="two   flexitem " fx-flex> B  </div>
+          <div class="three flexitem " fx-flex> C  </div>        
+        </div>
+        <div fx-flex="67" [fx-layout]="'column'+direction">
+            <div fx-layout="row" fx-flex="33%">
+              <div class="five  flexitem " fx-flex> E </div>
+              <div class="five  flexitem " fx-flex> F </div>                              
+            </div>
+            <div class="four  flexitem " fx-flex> D </div>
+        </div>
+      </div>
+    </md-card-content>
+    <md-card-footer class="bottomPad">
+      <div class="hint" >Current direction: &lt;fx-layout="row{{ direction }}"&gt;</div>
+    </md-card-footer>
+  </md-card>
+  `
+})
+export class DemoGridAreaRowSpan {
+  direction = "";
+
+  toggleDirection() {
+    let next = (DIRECTIONS.indexOf(this.direction) +1 ) % DIRECTIONS.length;
+    this.direction = DIRECTIONS[next];
+  }
+}
+const DIRECTIONS = ['', '-reverse'];