npm install --save @angular/flex-layout@latest
import { FlexLayoutModule }
from '@angular/flex-layout';
...
@NgModule({
imports: [FlexLayoutModule],
...
})
export class AppModule { }
Import Angular Flex-Layout NgModule
Install Angular Flex-Layout components
fxLayout |
|
---|---|
fxLayoutWrap |
|
fxLayoutGap |
|
fxLayoutAlign |
<div fxLayout="row"
fxLayout.xs="column"> </div>
<div fxLayoutWrap> </div>
<div fxLayoutGap="10px"> </div>
<div fxLayoutAlign="start stretch">
</div>
fxFlex |
|
---|---|
fxFlexOrder |
|
fxFlexOffset |
|
fxFlexAlign |
|
fxFlexFill |
<div fxFlex="1 2
calc(15em + 20px)"></div>
<div fxFlexOrder="2"></div>
<div fxFlexOffset="20px"></div>
<div fxFlexAlign="center"></div>
<div fxFlexFill></div>
breakpoint | mediaQuery |
---|---|
xs | 'screen and (max-width: 599px)' |
sm | 'screen and (min-width: 600px) and (max-width: 959px)' |
md | 'screen and (min-width: 960px) and (max-width: 1279px)' |
lg | 'screen and (min-width: 1280px) and (max-width: 1919px)' |
xl | 'screen and (min-width: 1920px) and (max-width: 5000px)' |
lt-sm | 'screen and (max-width: 599px)' |
lt-md | 'screen and (max-width: 959px)' |
lt-lg | 'screen and (max-width: 1279px)' |
lt-xl | 'screen and (max-width: 1919px)' |
gt-xs | 'screen and (min-width: 600px)' |
gt-sm | 'screen and (min-width: 960px)' |
gt-md | 'screen and (min-width: 1280px)' |
gt-lg | 'screen and (min-width: 1920px)' |
<div fxShow fxHide.xs="false" fxHide.lg="true"></div>
<div fxFlex="50%" fxFlex.gt-sm="100%"></div>
fxShow |
|
---|---|
fxHide |
|
ngClass |
|
ngStyle |
<div fxShow
[fxShow.xs]="isVisibleOnMobile()"></div>
<div fxHide
[fxHide.gt-sm]="isVisibleOnDesktop()"></div>
<div
[ngClass.sm]="{'fxClass-sm': hasStyle}"></div>
<div
[ngStyle.xs]="{color: 'blue'}"></div>
ObservableMedia |
|
---|---|
BREAKPOINTS |
|
BaseFxDirectiveAdapter |
constructor(public
media:ObservableMedia ) {}
providers: [{provide: BREAKPOINTS,
useValue: MY_CUSTOM_BREAKPOINTS }]
export class ClassDirective
extends NgClass {}
import {Subscription} from "rxjs/Subscription";
import {MediaChange, ObservableMedia}
from "@angular/flex-layout";
constructor(media: ObservableMedia) {
this.watcher = media.subscribe(
(change: MediaChange) => {
if ( change.mqAlias == 'xs') {
this.loadMobileContent();
}
});
}
<div>
<header>header</header>
<div>
<nav>nav</nav>
<article>article</article>
<aside>aside</aside>
</div>
<footer>footer</footer>
</div>
<div fxLayout="column">
<header>header</header>
<div fxLayout="row" fxFlex>
<nav fxFlex="1 6 20%">nav</nav>
<article fxFlex="3 1 60%">article</article>
<aside fxFlex="1 6 20%">aside</aside>
</div>
<footer>footer</footer>
</div>
<div fxLayout="column">
<header>header</header>
<div fxLayout="row" fxLayout.xs="column" fxFlex>
<nav fxFlex="1 6 20%" fxFlexOrder
fxFlexOrder.xs="2">nav</nav>
<article fxFlex="3 1 60%" fxFlexOrder
fxFlexOrder.xs="1">article</article>
<aside fxFlex="1 6 20%" fxFlexOrder
fxFlexOrder.xs="3">aside</aside>
</div>
<footer>footer</footer>
</div>
github.com/
twitter.com/