angularx-wrapper

Simple wrapper to create an elevated container using Angular Material.

Online Demo

https://angularx-wrapper.byh.uy/

Prerequisites:

1. This library requires @angular/material and lodash.
2. If you do not have one, make sure to install them in your project folder by running ng add @angular/material and npm install --save lodash.

Getting Started

1. Run npm install --save angularx-wrapper.
2. Import AngularXWrapperModule into your app.module:

...
import { AngularXWrapperModule } from 'angularx-wrapper';

@NgModule({
  ...
  imports: [
    ...
    AngularXWrapperModule
  ]
})
export class AppModule { }

Usage

<angularx-wrapper>
    Your content goes here.
</angularx-wrapper>

Directives

Properties

| Name | Type/Interface | Default | Description | | ------------------------ | ---------------------------------------| ------- | ------------------------------------------------------------------------------ | | @Input('ngxClass') | string | string[] | [] | Custom class name(s) for the wrapper | | @Input('ngxStyle') | {} | {} | Just like ngStyle, this accepts the styles for the wrapper | | @Input('elevation') | number (0 - 24) | 5 | Elevation level (the higher the number, the more elevated the wrapper appears) | | @Input('width') | number | string | '900px' | The wrapper's width | | @Input('padding') | number | string | '32px' | Padding between the wrapper and its content | | @Input('align' ) | 'center' | 'left' | 'right' | 'left' | The wrapper's alignment | | @Input('contentAlign') | 'center' | 'left' | 'right' | 'left' | Content's alignment inside the wrapper | | @Input('borderRadius') | number | string | '0px' | The wrapper's border radius |

Interfaces

N/A

Contribution

For feature request and bug report, visit the issue page.

License

MIT License - Refer to LICENSE.