From a95622738b616630dd2bfc4cb4991379f236760d Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Sat, 5 Aug 2017 19:21:18 -0500 Subject: [PATCH] docs: update flex-layout story --- .../stories/include-angular-flex.md | 85 ++++++++++--------- 1 file changed, 46 insertions(+), 39 deletions(-) diff --git a/docs/documentation/stories/include-angular-flex.md b/docs/documentation/stories/include-angular-flex.md index 25a0aaf5c1d6..107db0e9c1c9 100644 --- a/docs/documentation/stories/include-angular-flex.md +++ b/docs/documentation/stories/include-angular-flex.md @@ -1,12 +1,27 @@ -# Include [Flex Layout](https://github.com/angular/flex-layout) in your CLI application +## Include [Flex Layout](https://github.com/angular/flex-layout) in your CLI application -Include Angular Flex layout as detailed above. + + + -Install the `@angular/flex-layout` library and add the dependency to package.json... +> Above is snapshot of a [Online Demos](https://tburleson-layouts-demos.firebaseapp.com/#/docs) using @angular/flex-layout + + +
+ +### Include `@angular/flex-layout` as detailed below: + +Install the library and add the dependency to package.json... ```bash npm install --save @angular/flex-layout ``` +Or install the nightly build using: + +```bash +npm i --save @angular/flex-layout-builds +``` + Import the Angular Flex-Layout NgModule into your app module... ```javascript //in src/app/app.module.ts @@ -25,53 +40,45 @@ import { FlexLayoutModule } from '@angular/flex-layout'; Run `ng serve` to run your application in develop mode, and navigate to `http://localhost:4200` -Add the following to `src/app/app.component.css`... -```css -.header { - background-color: lightyellow; -} +
-.left { - background-color: lightblue; -} +### Sample App -.right { - background-color: pink; -} +Add the following to `src/app/app.component.css`... +```css +[fxLayout="column"] { border: 1px solid;padding:4px; margin-top:50px; }, +[fxFlex]{ padding:5px;}, +h3 { padding-top:20px; }, +.header { background-color: lightyellow; }, +.left { background-color: lightblue; }, +.right { background-color: pink; } ``` To verify flex-layout has been set up correctly, change `src/app/app.component.html` to the following... ```html -
- -
- -

- {{title}} -

- -
- -
- -
- LEFT: 20% wide -
- -
- RIGHT: 80% wide -
- -
-
-``` +
+
+

+ {{title}} +

+
+
+
LEFT: 20% wide
+
RIGHT: 80% wide
+
+
+ ``` After saving this file, return to the browser to see the very ugly but demonstrative flex-layout. +![screen shot 2017-08-05 at 7 20 05 pm](https://user-images.githubusercontent.com/210413/28999629-35c566a0-7a13-11e7-8d36-1d1a2244443c.png) + Among what you should see are - a light yellow header that is the entire width of the window, sitting directly atop 2 columns. Of those 2 columns, the left column should be light blue, and 20% wide, while the right column is pink, 80% to start, and will flex with window (re)size. +
+ ### More Info - - [Installation](https://github.com/angular/flex-layout#installation) - - [API Overview](https://github.com/angular/flex-layout/wiki/API-Overview) + - [Installation](https://github.com/angular/flex-layout/wiki/Using-Angular-CLI) + - [API Overview](https://github.com/angular/flex-layout/wiki/Declarative-API-Overview) - [Demo](https://tburleson-layouts-demos.firebaseapp.com/#/docs)