> For the complete documentation index, see [llms.txt](https://v1-6-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://v1-6-0.pipui.ru/components/alert.md).

# Оповещения

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

{% embed url="<https://codepen.io/pipui/pen/poZRewX>" %}
Пример обращения к оповещениям через JS
{% endembed %}

В примере выше, показан способ взаимодействия с оповещениями через Javascript. Если есть необходимость создавать их без использования Javascript, то можно использовать код ниже

```html
<div class="alert">
    <div class="alert-id" data-autoclose="true">
        <div class="alert-content">You have a new messages!</div>
        <div class="alert-footer">
            <div class="block-left">Alert</div>
            <div class="block-right"><button class="btn btn-clear close-trigger">ЗАКРЫТЬ</button></div>
        </div>
    </div>
</div>
```

Внутри контейнера <mark style="color:orange;">`.alert`</mark> может содержаться множество оповещений и нет необходимости создавать новый, однако если его положение (placement) отличается от существующих, то стоит добавить новый.

Метод <mark style="color:orange;">`pipui.alert.open`</mark> создает новое оповещение и содержит в себе 4 параметра:\
**text** - Основной текст оповещения. Данный текст выводится в блоке <mark style="color:orange;">`.alert-content`</mark>;\
**title** - Название оповещения. Данный текст выводится в блоке <mark style="color:orange;">`.alert-footer > .block-left`</mark>;\
**placement** - Местоположение оповещения на экране. Данный метод можно использовать добавив параметр <mark style="color:orange;">`data-placement="{Y}-{X}"`</mark> к блоку с классом <mark style="color:orange;">`.alert-id`</mark>;\
**autoclose** - Автозакрытие оповещения. В качестве значения можно передать число миллисекунд или undefined. По умолчанию или если указано undefined, значение выставляется исходя из значения <mark style="color:orange;">`pipui.alert.openTimeout`</mark>;\
**complete** - Анонимная функция, которая выполнится по окончанию вывода оповещения

Свойство <mark style="color:orange;">`pipui.alert.openTimeout`</mark> задает время по умолчанию, через которое оповещение исчезнет

Метод <mark style="color:orange;">`pipui.alert.open(`</mark>`text, title, placement, autoclose, complete`<mark style="color:orange;">`)`</mark> создает новое оповещение и выводит его

Метод <mark style="color:orange;">`pipui.alert.close(`</mark>`e, complete`<mark style="color:orange;">`)`</mark> закрывает оповещение с его последующим удалением

Метод <mark style="color:orange;">`pipui.alert.hide(`</mark>`e, complete`<mark style="color:orange;">`)`</mark> закрывает оповещение без его удаления

Метод <mark style="color:orange;">`pipui.alert.show(`</mark>`e, complete`<mark style="color:orange;">`)`</mark> открывает закрытое оповещение