1.0.0 • Published 4 years ago

@angular-material-extensions/layout v1.0.0

Weekly downloads
6
License
MIT
Repository
github
Last release
4 years ago

layout - Set of angular directives that allow developers to boost and easy enhance their app development's layout

npm version npm demo Join the chat at https://gitter.im/angular-material-extensions/Lobby CircleCI branch Build Status Coverage Status dependency Status devDependency Status Greenkeeper Badge license

Built by and for developers :heart:

Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

If did you like this project, support angular-material-extensions by starring :star: and sharing it :loudspeaker:

Table of Contents

Demo

View all the directives and components in action at https://angular-material-extensions.github.io/layout

Library's directives

Container

  • matContainer

Width

  • matWidth
  • matMinWidth
  • matMaxWidth

Height

  • matHeight
  • matMinHeight
  • matMaxHeight

Margin

  • matMargin
  • matMarginTop
  • matMarginBottom
  • matMarginLeft
  • matMarginRight

Padding

  • matPadding
  • matPaddingTop
  • matPaddingBottom
  • matPaddingLeft
  • matPaddingRight

Dependencies

  • Angular (requires Angular 2 or higher, tested with 2.0.0)

Installation

Install above dependencies via npm.

Now install @angular-material-extensions/layout via:

npm install --save @angular-material-extensions/layout

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for @angular-material-extensions/layout:

map: {
  '@angular-material-extensions/layout': 'node_modules/@angular-material-extensions/layout/bundles/layout.umd.js',
}

Once installed you need to import the main module:

import { MatLayoutModule } from '@angular-material-extensions/layout';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice MatLayoutModule .forRoot()):

import { MatLayoutModule } from '@angular-material-extensions/layout';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [MatLayoutModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import MatLayoutModule:

import { MatLayoutModule } from '@angular-material-extensions/layout';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [MatLayoutModule, ...], 
})
export class OtherModule {
}

Usage

Other Angular Libraries


Support

  • Drop an email to: Anthony Nahas
  • or open an appropriate issue
  • let us chat on Gitter

    Built by and for developers :heart: we will help you :punch:


jetbrains logo

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm


License

Copyright (c) 2018 Anthony Nahas. Licensed under the MIT License (MIT)

1.0.0

4 years ago