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.