@poseclop/ng-responsive-ui NPM

NgResponsiveUi

This library provides a service and 2 directives to implement Material Design Responsive Layout in your angular application.

:warning: This module was not tested in depth for production. Use at your own risk and peril.

This module requires @angular/cdk.

Import the module in your application

@ngModule({
    ...,
    imports: [
        ...,
        NgResponsiveUIModule
    ]
})

Since the module exports directives, best practice is to export it from a shared module to consume across your application feature modules

Name	Description
`gutter$: Observable<number>`	The margin / padding / gutter size in px for current screen
`columns$: Observable<number>`	The number of columns for responsive grid
`screenLayout$: Observable<ScreenLayout>`	The current screen breakPoint

Center the component horizontally and set margins according to material design responsive layout practices.

[responsiveContainer]

Name	Description
`maxWidth: number`	The max width of the container in px
`verticalMargin: number`	the vertical margin of the container in px

Style the component as a grid following Material Design best practices (gutter size and number of columns)

[responsiveGrid]

5 years ago

5 years ago