Alert

Используйте компонент Alert при создании диалогового окна, информационных сообщений пользователю.

Применение

Добавьте класс .uk-alert, чтобы применить к элементу блока компонент Alert.

Пример

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

Разметка

<div class="uk-alert">
    ...
</div>

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

Добавьте класс .uk-alert-close к элементу <button> или тегу <a> внутри окна предупреждения, чтобы применить кнопку закрытия. Чтобы использовать JavaScript для кнопки закрытия, добавьте атрибут data-uk-alert в блок с сообщением. Рекомендуется добавить класс .uk-close из компонента Close, чтобы придать кнопке надлежащий стиль, хотя вы также можете использовать текст или подходящее изображение.

Пример

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.

Разметка

<div class="uk-alert" data-uk-alert>
    <a href="" class="uk-alert-close uk-close"></a>
    <p>...</p>
</div>

Модификаторы

Доступно несколько модификаторов для изменения внешнего вида информационного сообщения. Добавьте один из следующих классов, чтобы применить подходящий вид.

Пример

Чтобы указать успешное или положительное сообщение, добавьте класс .uk-alert-success.

Разметка

<div class="uk-alert uk-alert-success" data-uk-alert>
    <a href="" class="uk-alert-close uk-close"></a>
    <p>...</p>
</div>

Чтобы указать сообщение, содержащее предупреждение, добавьте класс .uk-alert-warning.

Разметка

<div class="uk-alert uk-alert-warning" data-uk-alert>
    <a href="" class="uk-alert-close uk-close"></a>
    <p>...</p>
</div>

Чтобы указать важное сообщение, добавьте класс .uk-alert-danger.

Разметка

<div class="uk-alert uk-alert-danger" data-uk-alert>
    <a href="" class="uk-alert-close uk-close"></a>
    <p>...</p>
</div>

Модификатор размера

Добавьте класс .uk-alert-large , чтобы увеличить расстояние в окне сообщения.

Разметка

<div class="uk-alert uk-alert-large">
    ...
</div>

Пример

Прикольный заголовок

Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое. Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.

Разметка

<div class="uk-alert uk-alert-large" data-uk-alert>
    <a href="" class="uk-alert-close uk-close"></a>
    <h3>Прикольный заголовок</h3>
    <p>...</p>
</div>