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.themeis 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.