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

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

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

Close: Применение

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

Чтобы применить этот компонент и создать кнопку закрытия, добавьте к элементу <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` атрибут.

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