ngx-air-button-overlay v9.2.0-RC1

AirButtonOverlay

This project was generated with Angular CLI version 6.2.3.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build --prod air-button-overlay to build the library. The build artifacts will be stored in the dist/air-button-overlay directory. Always Use the --prod flag for a library build.

Package

Move to dist/air-button-overlay and run yarn pack to generate a tgz file.

Usage

Add this library on your project with yarn add './path/to/air-button-overlay-vx.x.x.tgz.

Import AirButtonOverlayModule from air-button-overlay on your module.

The component accepts three optional parameters:

• buttonName: string
• overlayStyle: AirButtonOverlayConfig ({'background-color'?: string, 'opacity'?: string})
• materialStyle: 'basic' | 'primary' | 'accent' | 'warn' | 'disabled' | 'raised-basic' | 'raised-primary' | 'raised-accent' | 'raised-warn' | 'raised-disabled' | 'stroked-basic' | 'stroked-primary' | 'stroked-accent' | 'stroked-warn' | 'stroked-disabled' | 'flat-basic' | 'flat-primary' | 'flat-accent' | 'flat-warn' | 'flat-disabled'

Note: mat-icon, mat-fav and mat-mini-fav are not mapped.

It returns an event of boolean when the overlay is closed, exposed on overlayClosed.

In you template use it like this... In app.module.ts:

...
import { AirButtonOverlayModule } from 'air-button-overlay';
import { MatButtonModule } from '@angular/material';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    AirButtonOverlayModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

... in app.component.ts:

import { AirButtonOverlayConfig } from 'air-button-overlay';

@Component({...})
export class AppComponent {
  fancyButtonName = 'My Fancy Button';

  velvetyBackdrop: AirButtonOverlayConfig = {
    'background-color': '#B71C1C',
    'opacity': '0.5'
  };

  isGone(event: boolean): void {
    if (event) {
      console.log('The overlay is now closed.');
    }
  }

... in app.component.html:

<air-button-overlay buttonName="My simple button">

  <blockquote class="imgur-embed-pub" lang="en" data-id="EaRnkyl">
    <a href="//imgur.com/EaRnkyl">An Extremely Realistic 3D Painting of a Cat</a>
  </blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

</air-button-overlay>


<air-button-overlay
  [buttonName]="fancyButtonName"
  [overlayStyle]="velvetyBackdrop"
  [materialStyle]="'flat-primary'"
  (overlayClosed)="isGone($event)">

    <div style="background: white; padding: 1rem; border: solid 2px black">
      <p>
        1969: <br>
        - What're you doing with that 2 KB of RAM? <br>
        - Sending people to the Moon. <br>
        <br>
        2018: <br>
        - What're you doing with that 1.5 GB of RAM? <br>
        - Running Slack. <br>
      </p>
    </div>

</air-button-overlay>

Made with ♥ by Sherpas.