Алерты

Вызов и базовый стиль

Вызов

\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 необходимо добавить .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>