Skip to content

Commit afc739f

Browse files
committed
chore(docs): add flex-layout directions
1 parent 9fe1ed6 commit afc739f

File tree

1 file changed

+77
-0
lines changed

1 file changed

+77
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# Include [Flex Layout](https://github.com/angular/flex-layout) in your CLI application
2+
3+
Include Angular Flex layout as detailed above.
4+
5+
Install the `@angular/flex-layout` library and add the dependency to package.json...
6+
```bash
7+
npm install --save @angular/flex-layout
8+
```
9+
10+
Import the Angular Flex-Layout NgModule into your app module...
11+
```javascript
12+
//in src/app/app.module.ts
13+
14+
import { FlexLayoutModule } from '@angular/flex-layout';
15+
// other imports
16+
17+
@NgModule({
18+
imports: [
19+
...
20+
FlexLayoutModule.forRoot()
21+
],
22+
...
23+
})
24+
```
25+
26+
Run `ng serve` to run your application in develop mode, and navigate to `http://localhost:4200`
27+
28+
Add the following to `src/app/app.component.css`...
29+
```css
30+
.header {
31+
background-color: lightyellow;
32+
}
33+
34+
.left {
35+
background-color: lightblue;
36+
}
37+
38+
.right {
39+
background-color: pink;
40+
}
41+
```
42+
43+
To verify flex-layout has been set up correctly, change `src/app/app.component.html` to the following...
44+
```html
45+
<div fxLayout="column">
46+
47+
<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
48+
49+
<h1>
50+
{{title}}
51+
</h1>
52+
53+
</div>
54+
55+
<div fxLayout="row">
56+
57+
<div class="left" fxFlex="20">
58+
LEFT: 20% wide
59+
</div>
60+
61+
<div class="right" fxFlex>
62+
RIGHT: 80% wide
63+
</div>
64+
65+
</div>
66+
</div>
67+
```
68+
69+
After saving this file, return to the browser to see the very ugly but demonstrative flex-layout.
70+
71+
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.
72+
73+
### More Info
74+
75+
- [Installation](https://github.com/angular/flex-layout#installation)
76+
- [API Overview](https://github.com/angular/flex-layout/wiki/API-Overview)
77+
- [Demo](https://tburleson-layouts-demos.firebaseapp.com/#/docs)

0 commit comments

Comments
 (0)