Alert

Shows alert based on alert type.

Features/Functionality

• Shows alert based on alert type.
• Alert will be shown with a min width of 300px and max width of 600px.
• The default position of alert will be top center for desktops and bottom center for small screen.

Basic Usage

Dependencies

• jquery
• font-awesome
• shared styles

HTML Structure

<require from="{user_path}/alert_elms/alert_elm"></require>

<cst-alert alert-mdl.bind="{alertMdl}"></cst-alert>

Bindable Properties

Property Name	Data Type	Required	Decription	Example
alertMdl	object	Yes	Object to set alert instance	alertMdl = {/}

*alertMdl structure*

alertMdl = {

instance:{}

}

Methods that can be called to show alerts

1. showAlert(message,type,alertPosition,options)
2. showAlertError(message,alertPosition,options)
3. showAlertSuccess(message,alertPosition,options)
4. showAlertWarning(message,alertPosition,options)
5. showAlertInfo(message,alertPosition,options)

**Method parameters**

• message: Message to be displayed.
• type: Type of alert to be shown. Type can be any of the following:
  • success
  • error
  • info
  • warning
• alertPosition: Position at which alert should be shown. Position can be any of the following:
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
• options: options to be passed to component. Following is the structure:
  options: {

  visibleTimeInMS: 3000,

  isNonFadingAlert: false

  }

Working Example

HTML

<template>

<require from="./shared/custom_comp/alert_elms/alert_elm"></require>

<div>

<cst-alert alert-mdl.bind="alertMdl"></cst-alert>

</div>

</template>

JS

class MyCls{

constructor(){

this.alertMdl = {};

}

}

export { MyCls }

Example Screen Shots

---

Demo Link
Demo

Commit check list

Mark down usage
https://guides.github.com/features/mastering-markdown/

Version	Date	Developed By	Information Classification	Reviewed By	Approved By
1.0	04-11-2019	Gunjan	INTERNAL	Tarun and Prasan	Prasan