Skip to content
This repository has been archived by the owner on Jul 17, 2022. It is now read-only.

Example Code

Irfan Maulana edited this page Sep 5, 2017 · 7 revisions

All code example using same HTML template :

<simplert :useRadius="true"
          :useIcon="true"
          ref="simplert">
</simplert>

Table of Contents

  1. Information Alert
  2. Success Alert
  3. Error Alert
  4. Warning Alert
  5. Alert Without Title
  6. Alert With HTML Content
  7. Alert With Custom Close Text
  8. Alert With Custom Close Class
  9. Alert With Custom Close Function
  10. Alert With Custom Class
  11. Alert With Custom Icon
  12. Alert With Confirm Button
  13. Alert With Confirm Button Custom Text
  14. Alert With Confirm Button Custom Class
  15. Alert With Confirm Button Function
  16. Alert With Disable Overlay Click
  17. Alert With No Button Show
  18. Alert With onOpen Function
  19. Alert With close X

Information Alert

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info'
}
this.$refs.simplert.openSimplert(obj)

Success Alert

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'success'
}
this.$refs.simplert.openSimplert(obj)

Error Alert

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'error'
}
this.$refs.simplert.openSimplert(obj)

Warning Alert

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'warning'
}
this.$refs.simplert.openSimplert(obj)

Alert Without Title

let obj = {
    message: 'Alert Message',
    type: 'info'
}
this.$refs.simplert.openSimplert(obj)

Alert With HTML Content

let obj = {
    title: 'Alert Title',
    message: '<span style="color:red;">I am HTML</span>',
    type: 'info'
}
this.$refs.simplert.openSimplert(obj)

Alert With Custom Close Text

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    customCloseBtnText: 'I am Close Button'
}
this.$refs.simplert.openSimplert(obj)

Alert With Custom Close Class

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    customCloseBtnClass: 'btn-warning'
}
this.$refs.simplert.openSimplert(obj)

Alert With Custom Close Function

let closeFn = function() {
    alert("I am Closed")
}
let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    onClose: closeFn
}
this.$refs.simplert.openSimplert(obj)

Alert With Custom Class

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    customClass: 'popup-custom-class'
}
this.$refs.simplert.openSimplert(obj)

Alert With Custom Icon

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    customIconUrl: 'https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-1/128/face-sad-512.png'
}
this.$refs.simplert.openSimplert(obj)

Alert With Confirm Button

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    useConfirmBtn: true
}
this.$refs.simplert.openSimplert(obj)

Alert With Confirm Button Custom Text

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    useConfirmBtn: true,
    customConfirmBtnText: 'OK'
}
this.$refs.simplert.openSimplert(obj)

Alert With Confirm Button Custom Class

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    useConfirmBtn: true,
    customConfirmBtnClass: 'btn-warning'
}
this.$refs.simplert.openSimplert(obj)

Alert With Confirm Button Function

let confirmFn = function() {
    alert("I am Confirmed")
}
let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    useConfirmBtn: true,
    onConfirm: confirmFn
}
this.$refs.simplert.openSimplert(obj)

Alert With Disable Overlay Click

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    disableOverlayClick: true
}
this.$refs.simplert.openSimplert(obj)

Alert With No Button Show

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    hideAllButton: true
}
this.$refs.simplert.openSimplert(obj)

Alert With onOpen Function

let openFn = function() {
    alert("I am Confirmed")
}
let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    onOpen: openFn
}
this.$refs.simplert.openSimplert(obj)

Alert With Close X

let obj = {
    title: 'Alert Title',
    message: 'Alert Message',
    type: 'info',
    showXclose: true
}
this.$refs.simplert.openSimplert(obj)