Off-canvas

• Использование
• Режимы анимации
• Модификатор «Flip»
• Off-canvas и Nav
• Off-canvas и Panel
• JavaScript
• JavaScript options

Компонент Off-canvas идеально подходит для построения мобильной навигации, аналогичной тем, которые популярны во многих мобильных приложениях, где присутствует кнопка в верхнем левом углу, открывающая боковую панель с меню ^*off-canvas.

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

Компонент Off-canvas включает в себя overlay (оверлей) и off-canvas bar.

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

Пример

<!-- Это якорная ссылка, переключающая off-canvas sidebar -->
<a href="#offcanvas-id" data-uk-offcanvas>...</a>

<!-- Это кнопка переключения off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-id'}">...</button>

<!-- Это off-canvas sidebar -->
<div id="offcanvas-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        ...
    </div>
</div>

Режимы анимации

Вы можете выбрать между четырьмя различными режимами анимации для off-canvas bar:

Пример

<a href="#my-id" data-uk-offcanvas="{mode:'slide'}">...</a>

<a href="#my-id" data-uk-offcanvas="{mode:'reveal'}">...</a>

<a href="#my-id" data-uk-offcanvas="{mode:'none'}">...</a>

Модификатор «Flip»

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

Пример

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

Off-canvas и Nav

Off-canvas sidebar может содержать навигацию из компонента Nav. Добавьте класс .uk-nav-offcanvas для стилизации навигации в соответствии с контекстом off-canvas.

Пример

<!-- Это кнопка переключения off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-id'}">...</button>

<!-- Это off-canvas sidebar -->
<div id="offcanvas-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <ul class="uk-nav uk-nav-offcanvas" data-uk-nav>
            ...
        </ul>
    </div>
</div>

Off-canvas и Panel

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

Пример

<!-- Это кнопка переключения off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-id'}">...</button>

<!-- Это off-canvas sidebar -->
<div id="offcanvas-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <div class="uk-panel">
            ...
        </div>
    </div>
</div>

JavaScript

Вы можете открывать и закрывать offcanvas с помощью JavaScript:

// Показать off-canvas, соответствующий переданному селектору CSS
UIkit.offcanvas.show('#my-id');

// Скрыть любые активные offcanvas. Установите force в true, если вы не хотите никакой анимации.
UIkit.offcanvas.hide([force = false])

JavaScript options

Это пример того, как установить параметры через атрибут:

data-uk-offcanvas="{mode:'slide'}"

Events