@cargos/cs-modal

Modal for Angular applications

Usage no npm install needed!

<script type="module">
  import cargosCsModal from 'https://cdn.skypack.dev/@cargos/cs-modal';
</script>

README

Angular cs-modal

This library was generated with [Angular CLI].

Getting started

Step 1: Install cs-modal:

NPM

npm install --save @cargos/cs-modal

Step 2: Import the CsModalModule:

import { CsModalModule } from '@cargos/cs-modal';

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

Step 3: Import the csModal in AppComponent and initialize the settings:

import { csModal, Modal } from '@cargos/cs-modal';

export class AppComponent {

  public settingsModal: Observable<Modal>;

  constructor() {
    this.settingsModal = csModal.getSettings();
  }

}

Step 4: Declare cs-modal component in app.component.html:

<cs-modal [settings]="settingsModal"></cs-modal>

Step 5: Include style dependencies and a theme:

@import "~material-icons/iconfont/material-icons.css";
@import "~@cargos/cs-modal/styles/modal.css";

//theme
@import "~@cargos/cs-modal/styles/sprintpass.theme.css";

Note: Only sprintpass.theme is available at the moment.

Settings

Key Type Default Description
title string '' ...
titleClass string '' ...
titleAlign 'left''center''right' 'center' ...
content ModalContent '' ...
contentAlign 'left''center''right' 'center' ...
type 'default''warning''error''success''info' 'default' ...
spinner 'dots''circle' 'dots' ...
buttons ButtonOptions[] [] ...
buttonsAlign 'left''center''right''space-evenly' 'center' ...
iconName string '' ...
iconFontClass string 'material-icons' ...
iconAlign 'left''center''right' 'center' ...
bgTheme 'black''white' 'black' ...
theme 'sprintpass' 'sprintpass' ...
animation 'scale''fade' 'fade' ...
closeAnimation 'scale''fade' 'fade' ...
closeIcon boolean(modal?: Modal) => Observable<any> null ...
closeIconName string 'close' ...
columnClass 'xsmall''small''medium''large''cover' 'small' ...
fontSize 'small''medium''large' 'small' ...
autoClose number 0 ...
autoCloseAction (modal?: Modal) => Observable<any>string '' ...
backgroundDismiss boolean(modal?: Modal) => Observable<any> null ...
backgroundDismissAnimation 'none''shake' 'shake' ...
escapeKey boolean(modal?: Modal) => Observable<any> null ...
maximize boolean false ...
onContentReady (modal?: Modal) => Observable<void> null ...
zIndex number 1000 ...

Methods

Name Settings Description
confirm |
success |
warning |
error |
close N/A ``

How to use

import { csModal } from '@cargos/cs-modal';

export class MyComponent {

  constructor() { }

  /* Optional if you want to close the modal when the component is destroyed */
  ngOnDestroy() {
    csModal.close();
  }

  showModal() {
    csModal.confirm({
        //...custom settings
    });
  }

}

Further help

Coming soon.