> For the complete documentation index, see [llms.txt](https://vue2-simplert.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vue2-simplert.gitbook.io/docs/example.md).

# Example Code

All code example using same HTML template :

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

See [demo page](https://mazipan.github.io/vue2-simplert/) for check interface result.

## Table of Contents

* [Information Alert](/docs/example.md#information-alert)
* [Success Alert](/docs/example.md#success-alert)
* [Error Alert](/docs/example.md#error-alert)
* [Warning Alert](/docs/example.md#warning-alert)
* [Alert Without Title](/docs/example.md#alert-without-title)
* [Alert With HTML Content](/docs/example.md#alert-with-html-content)
* [Alert With Custom Close Text](/docs/example.md#alert-with-custom-close-text)
* [Alert With Custom Close Class](/docs/example.md#alert-with-custom-close-class)
* [Alert With Custom Close Function](/docs/example.md#alert-with-custom-close-function)
* [Alert With Custom Class](/docs/example.md#alert-with-custom-class)
* [Alert With Custom Icon](/docs/example.md#alert-with-custom-icon)
* [Alert With Confirm Button](/docs/example.md#alert-with-confirm-button)
* [Alert With Confirm Button Custom Text](/docs/example.md#alert-with-confirm-button-custom-text)
* [Alert With Confirm Button Custom Class](/docs/example.md#alert-with-confirm-button-custom-class)
* [Alert With Confirm Button Function](/docs/example.md#alert-with-confirm-button-function)
* [Alert With Disable Overlay Click](/docs/example.md#alert-with-disable-overlay-click)
* [Alert With No Button Show](/docs/example.md#alert-with-no-button-show)
* [Alert With onOpen Function](/docs/example.md#alert-with-onopen-function)
* [Alert With close X](/docs/example.md#alert-with-close-x)

## Information Alert

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

[back to top](/docs/example.md#table-of-contents)

## Success Alert

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

[back to top](/docs/example.md#table-of-contents)

## Error Alert

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

[back to top](/docs/example.md#table-of-contents)

## Warning Alert

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

[back to top](/docs/example.md#table-of-contents)

## Alert Without Title

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

[back to top](/docs/example.md#table-of-contents)

## Alert With HTML Content

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

[back to top](/docs/example.md#table-of-contents)

## Alert With Custom Close Text

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

[back to top](/docs/example.md#table-of-contents)

## Alert With Custom Close Class

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

[back to top](/docs/example.md#table-of-contents)

## Alert With Custom Close Function

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

[back to top](/docs/example.md#table-of-contents)

## Alert With Custom Class

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

[back to top](/docs/example.md#table-of-contents)

## Alert With Custom Icon

```javascript
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)
```

[back to top](/docs/example.md#table-of-contents)

## Alert With Confirm Button

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

[back to top](/docs/example.md#table-of-contents)

## Alert With Confirm Button Custom Text

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

[back to top](/docs/example.md#table-of-contents)

## Alert With Confirm Button Custom Class

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

[back to top](/docs/example.md#table-of-contents)

## Alert With Confirm Button Function

```javascript
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)
```

[back to top](/docs/example.md#table-of-contents)

## Alert With Disable Overlay Click

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

[back to top](/docs/example.md#table-of-contents)

## Alert With No Button Show

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

[back to top](/docs/example.md#table-of-contents)

## Alert With onOpen Function

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

[back to top](/docs/example.md#table-of-contents)

## Alert With Close X

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

[back to top](/docs/example.md#table-of-contents)

![vue2-simplert](https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png)

Copyright © 2017 by [Irfan Maulana](https://github.com/mazipan/)