vue2-simplert
  • Home
  • Download
  • Usage Guide
  • Methods And Props
  • Example Code
  • Articles
  • FAQ
Powered by GitBook
On this page
  • Table of Contents
  • Information Alert
  • Success Alert
  • Error Alert
  • Warning Alert
  • Alert Without Title
  • Alert With HTML Content
  • Alert With Custom Close Text
  • Alert With Custom Close Class
  • Alert With Custom Close Function
  • Alert With Custom Class
  • Alert With Custom Icon
  • Alert With Confirm Button
  • Alert With Confirm Button Custom Text
  • Alert With Confirm Button Custom Class
  • Alert With Confirm Button Function
  • Alert With Disable Overlay Click
  • Alert With No Button Show
  • Alert With onOpen Function
  • Alert With Close X

Example Code

PreviousMethods And PropsNextArticles

Last updated 7 years ago

All code example using same HTML template :

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

See for check interface result.

Table of Contents

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)

vue2-simplert

Copyright © 2017 by

Irfan Maulana
demo page
Information Alert
Success Alert
Error Alert
Warning Alert
Alert Without Title
Alert With HTML Content
Alert With Custom Close Text
Alert With Custom Close Class
Alert With Custom Close Function
Alert With Custom Class
Alert With Custom Icon
Alert With Confirm Button
Alert With Confirm Button Custom Text
Alert With Confirm Button Custom Class
Alert With Confirm Button Function
Alert With Disable Overlay Click
Alert With No Button Show
Alert With onOpen Function
Alert With close X
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top
back to top