Off-canvas

Незаменимый и бесценный помощник компонент Off-canvas - сайдбар вне холста, вертикальная отзывчивая навигационная панель, сдвигаемая, правосторонняя и левостороняя, с выпадающим меню и с аккордеоном, анимированная и адаптивная боковая панель навигации.

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


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

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

Класс Описание
.uk-offcanvas Добавьте этот класс к элементу <div>, чтобы создать bar container и оверлей, перекрывающий страницу. Также необходимо добавить уникальный идентификатор (ID), чтобы можно было переключать боковую панель *sidebar off-canvas.
.uk-offcanvas-bar Добавьте этот класс к дочернему элементу <div>, чтобы создать боковую панель вне холста off-canvas bar.

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

Пример

Открыть ссылкой
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране.
Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой.

Разметка

<!-- Это якорная ссылка, переключающая 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:

Пример

Push (По умолчанию) Slide Reveal None

Разметка

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

Пример

Великолепно!
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране.
Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой.

Разметка

<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.

Пример

Заголовок Panel

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране.

Великолепно!

Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой.

Разметка

<!-- Это кнопка переключения 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'}"
Option Possible value Default Description
mode 'push', 'slide', 'reveal', 'none' push Offcanvas bar appear effect mode

Events

Name Parameter Description
show.uk.offcanvas event, panel, bar On offcanvas show
hide.uk.offcanvas event, panel, bar On offcanvas hide