# 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/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://vue2-simplert.gitbook.io/docs/example.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.