Создайте значок закрытия, который можно комбинировать с различными компонентами фреймворка UIkit 3. Значок «Закрыть» в оповещениях. Кнопка закрытия в модальном окне.
Иногда, в окно с важным уведомлением,
в модальное окно или
при отображении содержимого по типу выпадения,
когда отображается раскрывающийся список после нажатия на переключатель, требуется добавить кнопку закрытия для их скрытия.
Применение
Создание кнопки закрытия
Чтобы применить этот компонент и создать кнопку закрытия,
добавьте к элементу <a> или <button>атрибут uk-close.
Если стандартная кнопка закрытия показалась недостаточно большой,
можно применить данный модификатор. Добавьте класс .uk-close-large для создания большой кнопки закрытия.
Это пример того, как этот компонент можно использовать вместе с окном уведомления из компонента Алерт.
При нажатии на значёк, окно с уведомлением будет скрыто.
"Пальчики оближешь!" - такой была вывеска забегаловки, где не было салфеток.
<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 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>
В модальном окне
Кнопка закрытия в модальном окне
Вы можете добавить кнопку закрытия внутри модального диалогового окна. Это пример того, как данный компонент совместно используется с компонентом Модальное окно. По умолчанию значёк будет находится в правом верхнем углу.
Ты сверху милый, да, вот тут рукой... Не торопись, ровнее..., чуть пониже. Конечно, мне удобно дорогой! Да сбоку и немножечко поближе. Чуть наклониться и прижать?! Легко! Как мы с тобою чувствуем друг друга...! Да в этом деле нету пустяков! Вот тут ладонью бережно, по — кругу... На четвереньках? Это вариант! Я дотянусь, раз нужно так для дела.... Да, котик, да! Достал? Ты мой гигант! Шпагат?! Конечно! Я сама хотела! По нежной коже жаркий пот ручьем. Сто двадцать поз! Мы справились с тобою! Еще один волшебный день вдвоем. Я счастлива! НАКЛЕЕНЫ ОБОИ
<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 использует следующие строки перевода: