Offcanvas

Компонент Off-canvas в UIkit 3

Создайте боковую панель вне тела страницы, которая выезжает справа или слева. Компонент идеально подходит для создания мобильных меню.

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

Конечно, в компоненте можно выводить что угодно, не только меню. Например, каталог товаров, поиск, иконки соцсетей. В UIkit 3 версии компонент был изменен. Теперь ему доступны новые опции, о которых узнаете ниже.

Для использования компонента добавьте атрибут uk-offcanvas к родительскому элементу <div> и добавьте следующие классы элементам внутри:

Класс Описание
.uk-offcanvas-bar Добавьте этот класс дочернему элементу <div>.
.uk-offcanvas-close Добавьте атрибут uk-close элементу <a> или <button> для создания кнопки закрытия меню.

Вы можете использовать любой элемент для вызова боковой панели. Для ативации JS-части компонента добавьте атрибут uk-toggle. Естественно, элемент <a> должен быть связан с ID контейнера Off-canvas. Если вы используете другой элемент, например кнопку, просто добавьте атрибут uk-toggle="target: #ID", чтобы определить принадлежность кнопки к контейнеру. 

<body>

    <!-- Это кнопка, открывающая off-canvas -->
    <button uk-toggle="target: #my-id" type="button"></button>

    <!-- Это кнопка, закрывающая off-canvas -->
    <a href="#my-id" uk-toggle></a>

    <!-- Это сам off-canvas -->
    <div id="my-id" uk-offcanvas>
        <div class="uk-offcanvas-bar">

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

        </div>
    </div>

</body>
  • Открыть

    Заголовок

    Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

  • <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-usage">Открыть</button>

<a href="#offcanvas-usage" uk-toggle>Открыть</a>

<div id="offcanvas-usage" uk-offcanvas>
    <div class="uk-offcanvas-bar">

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

        <h3>Заголовок</h3>

        <p>Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.</p>

    </div>
</div>

Оверлей

В UIkit 3 появилась возможность затемнять страницу, когда компонент Off-canvas активен. Чтобы добавить оверлей, затемняющий страницу, добавьте параметр overlay: true в атрибут uk-offcanvas.

<div id="my-id" uk-offcanvas="overlay: true">...</div>

  • Заголовок

    Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-overlay">Открыть</button>

<div id="offcanvas-overlay" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar">

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


        <h3>Заголовок</h3>

        <p>Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.</p>

    </div>
</div>

Силами css можно задать любое отображение оверлея.

Модификатор места появления

Добавьте параметр flip: true в атрибут uk-offcanvas, чтобы задать появление панели не слева, а справа.

<div id="my-id" uk-offcanvas="flip: true">...</div>

  • Заголовок

    Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-flip">Открыть</button>

<div id="offcanvas-flip" uk-offcanvas="flip: true; overlay: true">
    <div class="uk-offcanvas-bar">

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

        <h3>Заголовок</h3>

        <p>Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.</p>

    </div>
</div>

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

По умолчанию компонент off-canvas имеет анимацию появления slide-in. Теперь можно задать и другое появление. Для этого добавьте один из следующих атрибутов:

Параметр Описание
mode: slide Off-canvas выезжает слева и накладывается на содержимое. Это режим по умолчанию.
mode: push Off-canvas выдвигается и "толкает" страницу.
mode: reveal Off-canvas остается на своем месте, а выезжает страница.
mode: none Отключение анимации появления 
<div id="my-id" uk-offcanvas="mode: push">...</div>

  • Заголовок

    Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

    Заголовок

    Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

    Заголовок

    Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

    Заголовок

    Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

  • <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-slide">Slide</button>

<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-push">Push</button>

<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-reveal">Reveal</button>

<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-none">None</button>

<div id="offcanvas-slide" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar">

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

        <h3>Заголовок</h3>

        <p>Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.</p>

    </div>
</div>

<div id="offcanvas-push" uk-offcanvas="mode: push; overlay: true">
    <div class="uk-offcanvas-bar">

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

        <h3>Заголовок</h3>

        <p>Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.</p>

    </div>
</div>

<div id="offcanvas-reveal" uk-offcanvas="mode: reveal; overlay: true">
    <div class="uk-offcanvas-bar">

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

        <h3>Заголовок</h3>

        <p>Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.</p>

    </div>
</div>

<div id="offcanvas-none" uk-offcanvas="mode: none; overlay: true">
    <div class="uk-offcanvas-bar">

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

        <h3>Заголовок</h3>

        <p>Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.</p>

    </div>
</div>

Навигация в компоненте Off-canvas

Переходим к интересному. Из компонента Навигация можно взять и разместить вот такую конструкцию:

<div id="my-id" uk-offcanvas>
    <div class="uk-offcanvas-bar">
        <ul class="uk-nav uk-nav-default">...</ul>
    </div>
</div>

  • <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-nav-primary">Основная навгация</button>

<button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-nav">Навигация по умолчанию</button>

<div id="offcanvas-nav-primary" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar uk-flex uk-flex-column">

        <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
            <li class="uk-active"><a href="#">Активная ссылка</a></li>
            <li class="uk-parent">
                <a href="#">Ссылка</a>
                <ul class="uk-nav-sub">
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                </ul>
            </li>
            <li class="uk-nav-header">Заголовок</li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Ссылка</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Ссылка</a></li>
        </ul>

    </div>
</div>

<div id="offcanvas-nav" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar">

        <ul class="uk-nav uk-nav-default">
            <li class="uk-active"><a href="#">Активная ссылка</a></li>
            <li class="uk-parent">
                <a href="#">Ссылка</a>
                <ul class="uk-nav-sub">
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                </ul>
            </li>
            <li class="uk-nav-header">Заголовок</li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Ссылка</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Ссылка</a></li>
        </ul>

    </div>
</div>

Опции компонента

Любая из перечисленных оптция применима к атрибуту компонента. Отделяйте опции друг от друга точкой с запятой. Подробнее

Опция Значение По умолчанию Описание
mode String slide Устанавливает режим анимации slide, reveal, push или none.
flip Boolean false Выводит off-canvas с правой стороны.
overlay Boolean false Добавляет оверлей к странице.
esc-close Boolean true Разрешает закрывать off-canvas по нажатию Esc.
bg-close Boolean true Разрешает закрывать off-canvas по клику на оверлей.
container String true Определяет целевой контейнер с помощью селектора, чтобы указать, где в DOM должен быть добавлен off-canvas.

Значение false отменяет эту опцию. |

mode — Базовая опция, которая может быть пропущена в случае, если это едиинственный параметр у атрибута.

<span uk-offcanvas="push"></span>

JavaScript

Все о компонентах JavaScript.

Инициализация

UIkit.offcanvas(element, options);

События

Для компонента доступны следующие события:

Имя Описание
beforeshow Срабатывает до отображения объекта.
show Срабатывает после отображения объекта.
shown Срабатывает после завершения анимации появления.
beforehide Срабатывает до того, как объект будет скрыт.
hide Срабатывает после запуска анимации скрытия объекта.
hidden Срабатывает после того, как объект скрыт.

Методы

Для компонента доступны следующие методы:

Show

UIkit.offcanvas(element).show();

Отображает Offcanvas.

Hide

UIkit.offcanvas(element).hide();

Скрывает Offcanvas.