nfl

ng2-flex-layout

Angular 2 Material Responsive Layout Directives

Showing:

Popularity

Downloads/wk

62

Maintenance

No Maintenance Data Available

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

ng2-flex-layout

ng2-flex-layout is a small set of Angular 2 attribute directives aimed at providing flex-box based responsive layout directives that are api-compatible with those found in Angular Material 1.

Installation/Setup

The following directions will work using the latest version of angular-cli@webpack

Install with NPM

Install with npm npm install --save ng2-flex-layout

Add Module as a Dependency to Your App

Import LayoutModule 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 { LayoutModule } from 'ng2-flex-layout';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import Required CSS File

Import the required css file into your app's styles.css file

/* src/styles.css */
@import "../node_modules/ng2-flex-layout/dist/ng2-flex-layout.css";

Usage

Layout Containers

The layout directive allows you to specify a layout container and the direction in which the children will flow:

example

<div layout="row">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
</div>

You can also specify different layout directions for different screen sizes

<div layout="row" layoutXs="column">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
</div>

The container in the example above will have a flex-direction of column on extra small screen sizes and a flex-direction of row on all other screen sizes. See the Angular Material 1 documentation for breakpoint details

Layout Children

Using the flex directive on a container's child elements allows you to specify the percentage of available room each element should fill.

<div layout="row">
  <div flex="20"> 1 </div>
  <div flex="80"> 2 </div>
</div>

In the example above, the first child element will take up 20% of the available width of its parent and the 2nd child element will take up 80%.

Similar to containers, you can also specify different flex percentages for different screen sizes

<div layout="row">
  <div flex="20" flexXs="40"> 1 </div>
  <div flex="80" flexXs="60"> 2 </div>
</div>

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