Компонент Уведомления

Alert: Применение

Создание оповещения

Чтобы применить компонент Уведомлениий добавьте атрибут uk-alert к элементу блока.

<div uk-alert></div>

• Результат
• Разметка

Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку.

<div uk-alert>
    Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку.
</div>

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

Чтобы создать кнопку закрытия и включить ее функциональность, добавьте внутри блока с уведомлением класс .uk-alert-close к элементу <button> или <a>. Для того, чтобы применить кнопку закрытия из компонента Значок закрытия, добавьте атрибут uk-close.

Итак, добавляем к блоку с уведомлением кнопку закрытия:

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

• Результат
• Разметка

Уведомление

Дхаммапада : "Наша жизнь — следствие наших мыслей; она рождается в нашем сердце, она творится нашею мыслью. Если человек говорит и действует с доброю мыслью — радость следует за ним как тень, никогда не покидающая."

<div uk-alert>
    <a class="uk-alert-close" href uk-close></a>
    <h3>Уведомление</h3>
    <p>Дхаммапада : "Наша жизнь — следствие наших мыслей; она рождается в нашем сердце, она творится нашею мыслью. Если человек говорит и действует с доброю мыслью — радость следует за ним как тень, никогда не покидающая."</p>
</div>

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

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

• Результат
• Разметка

Самое необходимое учение — это то, которое отучает от зла. - Антисфен.

Глядя в прошлое - снимите шляпу, глядя в будущее - засучите рукава!

Не стесняйтесь своих чувств и желаний – другой жизни для них не будет…

Прощайте врагов ваших — это лучший способ вывести их из себя. - Оскар Уайльд.

<div class="uk-alert-primary" uk-alert>
    <a class="uk-alert-close" href uk-close></a>
    <p>Самое необходимое учение — это то, которое отучает от зла. - Антисфен.</p>
</div>
<div class="uk-alert-success" uk-alert>
    <a class="uk-alert-close" href uk-close></a>
    <p>Глядя в прошлое - снимите шляпу, глядя в будущее - засучите рукава!</p>
</div>
<div class="uk-alert-warning" uk-alert>
    <a class="uk-alert-close" href uk-close></a>
    <p>Не стесняйтесь своих чувств и желаний – другой жизни для них не будет…</p>
</div>
<div class="uk-alert-danger" uk-alert>
    <a class="uk-alert-close" href uk-close></a>
    <p>Прощайте врагов ваших — это лучший способ вывести их из себя. -  Оскар Уайльд.</p>
</div>

Параметры для атрибута

При использовании компонента Alert к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

animation является Primary опцией. Если animation это единственный параметр в значении атрибута, то её ключ можно не использовать.

<span uk-alert="duration-*"></span>

<div uk-alert="duration: 1100">
    <a class="uk-alert-close" href uk-close></a>
    <p><strong>Медленное закрытие</strong> Жизнь — это непрекращающееся рождение, и себя принимаешь таким, каким становишься.</p>
</div>

<div class="uk-alert-primary" uk-alert>
    <a class="uk-alert-close" href uk-close></a>
    <p><strong>Быстрое закрытие</strong> Жизнь — не страдание и не наслаждение, а дело, которое мы обязаны делать и честно довести его до конца.</p>
</div>

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.alert(element, options);

События

Следующие события будут инициированы для элементов компонента «Alert»:

Методы

Для компонента «Alert» доступны следующие методы:

Close

UIkit.alert(element).close();

Закрывает и удаляет диалоговое окно Алерт.