Off-холст

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

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

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

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

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

Пример

Разметки

<!-- 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 класс за пределами холста, бар, чтобы выравнивать, так, что он скользит от правого.

Пример

Разметки

<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 класса.

Пример

Разметки

<!-- 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])

События