<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>Flex-Layout Template</title>
<link rel="stylesheet" href="assets/style.css" />
<!-- Polyfills -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="lib/config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<test-app>
loading...
</test-app>
</body>
</html>
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/flex-layout' : 'https://rawgit.com/angular/flex-layout-builds/master/bundles/flex-layout.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'typescript': 'npm:typescript@2.0.10/lib/typescript.js',
},
//packages defines our app package
packages: {
app: {
main: './boot.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {TestAppModule} from './app/test-app-module';
platformBrowserDynamic().bootstrapModule(TestAppModule);
//our root app component
import {Component} from '@angular/core'
@Component({
selector: 'test-app',
template: `
<div fxLayout="column" fxFlexFill style="flex: 1 0 auto !important; background-color:blue;">
<div fxFlex="100px" style="background-color:red;">explorer-nav</div>
<div fxFlex fxLayout="row" fxLayoutAlign="flex: 1 0 auto !important; space-between stretch">
<div fxFlex="100px" style="background-color:yellow;">
<div fxFlexFill fxLayout="column" fxLayoutAlign="start stretch" style="flex: 1 0 auto !important;">
<div fxFlex="100px" fxLayout="column" fxLayoutAlign="center center"
(click)="toggleDirection()" style="background-color:CornflowerBlue;">
<img src="../../../assets/images/button1.png" alt="button1">
<p>button1</p>
</div>
<div fxFlex="100px" fxLayout="column" fxLayoutAlign="center center"
(click)="toggleDirection()" style="background-color:DodgerBlue;">
<img src="../../../assets/images/button1.png" alt="button2">
<p>button2</p>
</div>
<div fxFlex="100px" fxLayout="column" fxLayoutAlign="center center"
(click)="toggleDirection()" style="background-color:CornflowerBlue;">
<img src="../../../assets/images/button1.png" alt="button3">
<p>button3</p>
</div>
<div fxFlex style="flex: 1 1 100%; min-height:100vh;"></div>
<div fxFlex="100px" fxLayout="column" fxLayoutAlign="center center" class="userIcon"
(click)="toggleDirection()" style="background-color:CornflowerBlue;">
<img src="../../../assets/images/user.png" alt="User">
</div>
</div>
</div>
<div fxFlex fxLayout={{direction}} fxLayoutAlign="space-between stretch" style="flex: 1 0 auto !important; background-color:green;">
<div [fxFlex]="panelWidth" [fxShow]="explorerShow" style="background-color:orange;"
fxLayout="column" fxLayoutAlign="start stretch" class="listPanel">
explorer-detail
</div>
<div fxFlex style="flex: 1 0 auto !important; background-color:black; color: white;">
<div fxFlexFill style="flex: 1 1 100%; min-height:100vh; background-color:blue; color: white;">
explorer-map
</div>
</div>
</div>
</div>
</div>
`,
})
export class TestApp {
direction = "row";
panelWidth = '300px';
explorerShow = true;
toggleDirection() {
let next = (DIRECTIONS.indexOf(this.direction) +1 ) % DIRECTIONS.length;
this.direction = DIRECTIONS[next];
}
}
const DIRECTIONS = ['row', 'column'];
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import * as Rx from 'rxjs/Rx';
import {FlexLayoutModule} from "@angular/flex-layout";
import { TestApp} from "./test-app";
@NgModule({
imports: [
BrowserModule,
FlexLayoutModule
],
declarations: [ TestApp ],
bootstrap: [ TestApp ]
})
export class TestAppModule {}
html, body, test-app {
display: block;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
min-width: 100%;
min-height: 100%;
}
Suggestions:
1. add "display: block;" to full screen body and friends to initialize.
2. For any naked "flex" that could be a "column", add style="flex: 1 1 100%; min-height:100vh;" to the element.
3. Add "flex: 1 0 auto !important;" to the parent layout elements that are not correctly being filled to their children's heights.
4. ???