Компонент Значок закрытия : Close

Создайте значок закрытия, который можно комбинировать с различными компонентами фреймворка UIkit 3.

Создание кнопки закрытия

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

Чтобы применить этот компонент и создать кнопку закрытия, добавьте к элементу <a> или <button>атрибут uk-close.

<button type="button" uk-close></button>

<a href="" uk-close></a>
  • <button type="button" uk-close></button>

Большая кнопка : Модификатор «Large»

Если стандартная кнопка закрытия показалась недостаточно большой, можно применить данный модификатор. Добавьте класс .uk-close-large для создания большой кнопки закрытия.

Разметка и пример

<button class="uk-close-large" type="button" uk-close></button>
  • <button class="uk-close-large" type="button" uk-close></button>

Значок «Закрыть» в оповещениях

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

Это пример того, как этот компонент можно использовать вместе с окном уведомления из компонента Алерт. При нажатии на значёк окно с уведомлением будет скрыто.

<div uk-alert>
    <button class="uk-alert-close" type="button" uk-close></button>
</div>
  • "Пальчики оближешь!" - такой была вывеска забегаловки, где не было салфеток.

  • <div class="uk-alert-primary" uk-alert>
        <button class="uk-alert-close" type="button" uk-close></button>
        <p>"Пальчики оближешь!" - такой была вывеска забегаловки, где не было салфеток.</p>
    </div>

Кнопка «Закрыть» и Выпадение (Drop)

Это рабочий пример того, как данный компонент используется совместно с компонентом Выпадение : Drop, который в свою очередь позволяет отображать контент после наведения или клика на элемент. При нажатии на волшебную кнопочку видимое окно с контентом будет скрыто.

Разметка и пример

<div uk-drop>
    <button class="uk-drop-close" type="button" uk-close></button>
</div>
  • Мальчик, который умеет читать мысли, проиграл в покер девочке, которая не умеет думать.

  • <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Нажми для демонстрации</button>
        <div uk-drop="mode: click">
            <div class="uk-card uk-card-body uk-card-default">
                <button class="uk-drop-close" type="button" uk-close></button>
                <p>Мальчик, который умеет читать мысли, проиграл в покер девочке, которая не умеет думать.</p>
            </div>
        </div>
    </div>

Кнопка закрытия в модальном окне

Вы можете добавить кнопку закрытия внутри модального диалогового окна. Это пример того, как данный компонент совместно используется с компонентом Модальное окно. По умолчанию значёк будет находится в правом верхнем углу.

Разметка и пример

<div id="modal" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" uk-close></button>
    </div>
</div>
  • Открыть модальное окно
  • <a class="uk-button uk-button-default" href="#modal" uk-toggle>Открыть модальное окно</a>
    <div id="modal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <h2 class="uk-modal-title">Камасутра</h2>
            <p>Ты сверху милый, да, вот тут рукой...<br> Не торопись, ровнее..., чуть пониже.<br> Конечно, мне удобно дорогой!<br> Да сбоку и немножечко поближе. Чуть наклониться и прижать?!<br> Легко! Как мы с тобою чувствуем друг друга...!<br> Да в этом деле нету пустяков!<br> Вот тут ладонью бережно, по — кругу...<br> На четвереньках? Это вариант!<br> Я дотянусь, раз нужно так для дела....<br> Да, котик, да! Достал? Ты мой гигант!<br> Шпагат?! Конечно! Я сама хотела! По нежной коже жаркий пот ручьем. Сто двадцать поз! Мы справились с тобою!<br> Еще один волшебный день вдвоем. Я счастлива!<br> НАКЛЕЕНЫ ОБОИ</p>
            <p class="uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button">Сбросить</button>
                <button class="uk-button uk-button-primary" type="button">Сохранить</button>
            </p>
        </div>
    </div>
Документация
Компоненты