nf

ng2-flex

Flexbox Layout System for Angular 2

Showing:

Popularity

Downloads/wk

0

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

Flexbox Layout Library for Angular 2

Join the chat at https://gitter.im/ng2-flex/Lobby npm version

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.

Installation/Setup

Install with NPM

Install with npm npm install --save ng2-flex

Add Module as a Dependency to Your App

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 { }

Usage

Container

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

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>

Properties of flx-row and flx-column

  • 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>
    
  • 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:
  • 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:
  • wrap

    • Type: string
    • Description:
    • Available values:
      • nowrap
      • wrap
      • wrapReverse
    • Example:
  • wrapAlignment

    • Type: string
    • Description:
    • Available values:
      • start
      • center
      • end
      • stretch
      • all
      • between
    • Example:
  • horizontalAlignment

    • Type: string
    • Description:
    • Available values:
      • left
      • center
      • right
    • Example:
  • verticalAlignment

    • Type: string
    • Description:
    • Available values:
      • top
      • center
      • bottom
    • Example:
  • order

    • Type: number|SizeMapping
    • Description:
    • Example:

Structural Directives

flxSize

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:

flxMaxSize

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:

flxMinSize

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:

Attribute Directives

flxClass

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:

Pipes

checkSize

  • Input: DeviceSize
  • Output: boolean
  • Params: allowedSizes - string
  • Description:

deviceSize

  • Input: string
  • Output: DeviceSize
  • Params: N/A
  • Description:

sizeMap

  • Input: object
  • Output: SizeMapping
  • Params: N/A
  • Description:

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial