README
Angular cs-modal
This library was generated with [Angular CLI].
Getting started
cs-modal
:
Step 1: Install 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.