> For the complete documentation index, see [llms.txt](https://v2-0-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2-0-0.pipui.ru/components/alert.md).

# Оповещения

## Общая информация <a href="#general-information" id="general-information"></a>

Компонент оповещений позволяет, при срабатывании определенных событий, донести до пользователя важную информацию.

Данный компонент спроектирован исключительно для работы через Javascript, однако при большом желании, HTML код оповещения можно сформировать и вручную.

## Создание через атрибуты <a href="#make-via-attributes" id="make-via-attributes"></a>

Для создания оповещения через атрибуты, необходимо добавить инициатору события вызова атрибут <mark style="color:orange;">`data-alert`</mark>. Опции оповещения можно задать\
через атрибуты <mark style="color:orange;">`data-alert-{NAME}`</mark>.

```html
<button class="btn" data-alert data-alert-title="Welcome" data-alert-text="Hello world!">Open Alert!</button>
```

{% embed url="<https://codepen.io/pipui/pen/rNrgbBZ>" %}
Пример работы кода выше
{% endembed %}

### Поддерживаемые атрибуты <a href="#supported-attributes" id="supported-attributes"></a>

<pre><code><strong>// Текст оповещения
</strong>data-alert-text

// Название оповещения
data-alert-title

// Местоположение появления оповещения
data-alert-placement

// Кол-во миллисекунд, через которое оповещение будет закрыто. По умолчанию 3000 (3 сек.)
data-alert-autoclose

// Будет ли отображен оверлей. Принимает значения true или false. По умолчанию false
data-alert-overlay
</code></pre>

## Создание через Javascript <a href="#make-via-javascript" id="make-via-javascript"></a>

Для создания оповещения через javascript, необходимо создать экземпляр класса PipUI.Alert и передать в него один параметр опций. Важнейшим свойством объекта опций является text и title, которые задают текст и название окна соответственно. При желании эти свойства могут быть опущены.

```javascript
new PipUI.Alert({text: 'Hello world!', title: 'Welcome'})
```

{% embed url="<https://codepen.io/pipui/pen/NWBVJZj>" %}
Пример работы кода выше
{% endembed %}

### Опции <a href="#options" id="options"></a>

```
// Выводить в консоль отладку
debug: false

// Текст оповещения
text: ''

// Название оповещения
title: ''

// Местоположение появления оповещения
placement: 'bottom-right'

// Иконка оповещения
icon: ''

// Отображать ли оверлей. Если хоть у одного открытого окна задан данный параметр,
// то оверлей будет отображаться до тех пор, пока такие оповещения открыты
overlay: false

// Автозакрытие оповещения. Если задано 0, то оповещение
// не будет закрываться автоматически
autoclose: 3000

// Отображать ли кнопку закрытия внутри оповещения
closeButton: true

// Можно закрыть при нажатии на само оповещение
closeClick: false

// Класс открытого оповещения
openedClass: 'alert-active'

// Функция обратного вызова при начале открытия оповещения
openCallback: undefined

// Функция обратного вызова при закрытияе открытия оповещения
closeCallback: undefined

// Функция обратного вызова при окончании открытия оповещения
openedCallback: undefined

// Функция обратного вызова при окончании закрытия оповещения
closedCallback: undefined

// Настройки шаблонов
templates: {
	// Шаблон окна оповещения
	alert: '...'
	
	// Шаблон кнопки закрытия внутри оповещения
	close: '<button type="button" class="btn btn-transparent" data-alert-close></button>'
}
```

### Методы <a href="#methods" id="methods"></a>

```javascript
let alert = new PipUI.Alert();

alert.getID() // Вернет уникальный идентификатор оповещения

alert.setOptions(object) // Изменить опции оповещения. DOM не будет изменен
// до вызова метода alert.update()

alert.getOptions() // Получить опции оповещения

alert.update() // Отрендерит окно заново

alert.isOpen() // Открыто ли оповещение

alert.close(callback) // Закрыть оповещение. Дальнейшая работа с ним будет невозможна
// Параметр callback является приоритетной функцией обратного
// вызова при начале закрытия, если она задана и через опции

alert.open(callback) // Отобразить оповещение
// Параметр callback является приоритетной функцией обратного
// вызова при начале отображения, если она задана и через опции
```

### События

| Триггер            | Описание                                       | Инициатор |
| ------------------ | ---------------------------------------------- | --------- |
| open-alert-pipui   | Срабатывает при начале открытия оповещения     | .modal    |
| opened-alert-pipui | Срабатывает при завершении открытия оповещения | .modal    |
| close-alert-pipui  | Срабатывает при начале закрытия оповещения     | .modal    |
| closed-alert-pipui | Срабатывает при завершении закрытия оповещения | .modal    |

## Дополнительная информация <a href="#more-info" id="more-info"></a>

Положения появления оповещения задаются в формате **{VERTICAL}-{HORIZONTAL}**

Поддерживаемые положения по вертикали: top, center, bottom

Поддерживаемые положения по горизонтали: left, center, right