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

Алерты

Вызов

\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-2020, «1С-Битрикс», 2020
Наверх