# Оповещения

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

{% 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> открывает закрытое оповещение


---

# 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://v1-6-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.