Документация для разработчиков

Алерты

Вызов

\Bitrix\Main\UI\Extension::load("ui.alerts");

Базовый стиль

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert -->
<div class="ui-alert">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Размеры

MD

Модификатор .ui-alert-md. Размер по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-md -->
<div class="ui-alert ui-alert-md">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

XS

Модификатор .ui-alert-xs. Размер по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-xs-->
<div class="ui-alert ui-alert-xs">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Цвет

Default

Модификатор .ui-alert-default. Цвет по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-default -->
<div class="ui-alert ui-alert-default ">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Success

Модификатор .ui-alert-success. Цвет по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-success-->
<div class="ui-alert ui-alert-success">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Danger

Модификатор .ui-alert-danger. Цвет по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-danger-->
<div class="ui-alert ui-alert-danger">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Warning

Модификатор .ui-alert-warning. Цвет по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-warning-->
<div class="ui-alert ui-alert-warning">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Primary

Модификатор .ui-alert-primary. Цвет по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-primary-->
<div class="ui-alert ui-alert-primary">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Иконки

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-icon-warning-->
<div class="ui-alert ui-alert-icon-warning">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-icon-danger-->
<div class="ui-alert ui-alert-icon-danger">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-icon-info-->
<div class="ui-alert ui-alert-icon-info">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Кнопка закрытия

В .ui-alert необходимо добавить span.ui-alert-close-btn.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-close-btn-->
<div class="ui-alert ui-alert-close-btn">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Закрытие с анимацией

После добавления класса .ui-alert-close-animate на .ui-alert весь блок схлопнется с анимацией. Анимация занимает 300ms, после чего элемент можно удалить.

Внимание! Текст предупреждения находится здесь.
<!-- .ui-alert.ui-alert-close-animate > span.ui-alert-close-btn -->
<div class="ui-alert ui-alert-close-animate">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
    <span class="ui-alert-close-btn"></span>
</div>

Прочее

Текст по центру

Модификатор .ui-alert-text-center.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-text-center-->
<div class="ui-alert ui-alert-text-center">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Сообщение типа inline-block

Модификатор .ui-alert-inline.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-inline ->
<div class="ui-alert ui-alert-inline ">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2019, «1С-Битрикс», 2019
Наверх