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

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

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

Применение

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

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

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

<a href="" uk-close></a>
  • <button type="button" uk-close aria-label="Закрыть"></button>

Модификатор «Large»

Большая кнопка

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

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

<button class="uk-close-large" type="button" uk-close></button>
  • <button class="uk-close-large" type="button" aria-label="Закрыть" uk-close></button>

В «Alert-уведомлениях»

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

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

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

<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" aria-label="Закрыть" uk-close></button>
        <p>"Пальчики оближешь!" - такой была вывеска забегаловки, где не было салфеток.</p>
    </div>

В «Drop-выпадениях»

Кнопка «Close» внутри «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 uk-align-right" type="button" aria-label="Закрыть" 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" aria-label="Закрыть" 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>

Доступность

Компонент Close автоматически устанавливает соответствующие роли и свойства WAI-ARIA.

  • Значок (иконка) закрытия имеет aria-label свойство, а если используется элемент <a>, то роль button.

Интернационализация

Компонент Close использует следующие строки перевода:
Ключ По умолчанию Описание
label Close aria-label атрибут.

Подробнее о переводе компонентов.