This library was made with the intention to help software developers that wants a simple layout system out of the box for Angular 2. This library uses Flexbox, so the compatibility with old browsers is limited.
Install with npm npm install --save ng2-flex
Import FlexModule
and add it to the imports
of your app's AppModule
// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { FlexModule } from 'ng2-flex';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
FlexModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
You need to specify the flxContainer
as the first element in your html body.
Example:
<flx-container>
...
</flx-container>
Example: DIV as container
<div flx-container>
...
</div>
Grid system is compound of three components:
The flx-grid
allows you to generate a Grid Layout System. Inside of this component we add rows using the flx-row
component and, inside of those rows, we add the columns using the flx-column
component.
Example:
<flx-grid>
<flx-row>
Header
</flx-row>
<flx-row>
<flx-column>Main Content</flx-column>
<flx-column>Side bar</flx-column>
</flx-row>
<flx-row>
Footer
</flx-row>
</flx-grid>
Example (using HTML5 elements):
<flx-grid>
<header flx-row>
Header
</header>
<flxRow>
<main flx-column>Main Content</main>
<aside flx-column>Side bar</aside>
</flxRow>
<footer flx-row>
Footer
</footer>
</flxGrid>
-
size
- Type:
string|SizeMapping
- Description: Size of the Row/Column in pixels or percentage of the parent. The size can be a string or a instance of SizeMapping object.
- Example:
<flx-row [size]="'50%'"></flx-row> <flx-column [size]="'100px'"></flx-column> <flx-row [size]="{small: '20%', medium: '30%'}"></flx-row>
- Type:
-
switchSize
- Type:
string
- Description: Device size when the row shows inside elements as column and column shows inside elements as row.
- Available values:
- extraSmall
- small
- medium
- large
- Example:
- Type:
-
separation
- Type:
string
- Description: How inner elements distribute extra space in the main axis (Row: X Axis, Column: Y Axis).
- Available values:
- between
- all
- Example:
- Type:
-
wrap
- Type:
string
- Description:
- Available values:
- nowrap
- wrap
- wrapReverse
- Example:
- Type:
-
wrapAlignment
- Type:
string
- Description:
- Available values:
- start
- center
- end
- stretch
- all
- between
- Example:
- Type:
-
horizontalAlignment
- Type:
string
- Description:
- Available values:
- left
- center
- right
- Example:
- Type:
-
verticalAlignment
- Type:
string
- Description:
- Available values:
- top
- center
- bottom
- Example:
- Type:
-
order
- Type:
number|SizeMapping
- Description:
- Example:
- Type:
It allow us to load an element in the DOM when the device size is the same than the specified in the directive. Is the same behavior that has ngIf
directive but with a device size instead of a boolean value.
Example:
It allow us to load an element in the DOM while the device size is less than or equal that the specified in the directive.
Example:
It allow us to load an element in the DOM while the device size is more than or equal that the specified in the directive.
Example:
It allow us to set classes for different device sizes. Is the same behavior that has ngClass
but we specify device sizes instead of boolean values.
We can add more than one size for the same class with the pipe |
character as a separator.
Example:
- Input:
DeviceSize
- Output:
boolean
- Params: allowedSizes -
string
- Description:
- Input:
string
- Output:
DeviceSize
- Params: N/A
- Description:
- Input:
object
- Output:
SizeMapping
- Params: N/A
- Description: