Off-холст

Создания плавного выключения-полотно боковой панели, которая скользит в и из страницы.

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


Использование

За пределами холста компонент состоит из накладки и off-холст-бар.

Класс Описание
.uk-offcanvas Добавьте этот класс к <div> элемент для создания стержня и контейнера наложения, гашение страницы. Идентификатор также должен быть добавлен, так что за пределами холста боковой панели можно переключать.
.uk-offcanvas-bar Добавить этот класс, чтобы ребенок <div> элемент для создания off-холст-бар.

Вы можете использовать любой элемент чтобы переключать off-холст боковой панели. Сообщение <a> элемент должен быть связан с идентификатором off-холст контейнер. Чтобы включить необходимые JavaScript, просто добавьте data-uk-offcanvas атрибут. Если вы используете другой элемент, как кнопка, просто добавьте data-uk-offcanvas="{target:'#ID'}" атрибут значение целевой идентификатор off-холст контейнер.

Пример

Открыть
Lorem ipsum dolor sit amet, миннеаполис adipisicing 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.

Разметки

<!-- This is an anchor toggling the off-canvas sidebar -->
<a href="#my-id" data-uk-offcanvas>...</a>

<!-- This is a button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">...</div>
</div>

Флип модификатор

Добавить .uk-offcanvas-bar-flip класс за пределами холста, бар, чтобы выравнивать, так, что он скользит от правого.

Пример

Lorem ipsum dolor sit amet, миннеаполис adipisicing 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.

Разметки

<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">...</div>
</div>

Off-холст навы

Вне холста Sidebar может содержать сча от Сча компонент. Добавить .uk-nav-offcanvas класс стиль сча по словам вне контекста Canvas.

Пример

Разметки

<!-- This is the button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <ul class="uk-nav uk-nav-offcanvas" data-uk-nav>...</ul>
    </div>
</div>

Off-холст панелей

Вы можете разместить любой пользовательский контент внутри off-холст-бар. Просто оберните его с <div> и добавить в .uk-panel класса.

Пример

Название группы

Lorem ipsum dolor sit amet, миннеаполис adipisicing 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.

Разметки

<!-- This is the button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <div class="uk-panel">...</div>
    </div>
</div>

JavaScript

Вы можете открыть и закрыть offcanvas через JavaScript:

// Show an off-canvas matching the passed CSS selector
UIkit.offcanvas.show('#my-id');

// Hide any active offcanvas. Set force to true, if you don't want any animation.
UIkit.offcanvas.hide([force = false])

События

Название Параметр Описание
show.uk.offcanvas event, panel, bar На offcanvas показать
hide.uk.offcanvas event, panel, bar На offcanvas скрыть