Закрытие

Компонент Close закрытие Uikit 3

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

Как использовать компонент Close в UIkit 3

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

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

<a href="" uk-close></a>

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

Модификатор размера иконки

Добавьте класс .uk-close-large к созданной кнопке, чтобы увеличить ее размер:

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

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

Использование компонента для закрытия уведомлений

Пример того, как использовать иконку закрытия вместе с компонентом Alert. После клика по иконке закрытия окно исчезает и удаляется из DOM.

<div uk-alert>
    <button class="uk-alert-close" type="button" uk-close></button>
</div>

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div uk-alert>
    <button class="uk-alert-close" type="button" uk-close></button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

Взаимодействие с компонентом Drop

Этот пример демонстрирует взаимодействие с компонентом Drop.

<div uk-drop>
    <button class="uk-drop-close" type="button" uk-close></button>
</div>

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
</div>

Взаимодействие с модальными окнами

В этом примере демонстрируется взаимодействие с компонентом Modal.

<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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>