# Оповещения

## Общая информация <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


---

# 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://v2-0-0.pipui.ru/components/alert.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.