Компонент Off-canvas

Создайте боковую панель "вне холста". Off-canvas идеально подходит при создании мобильных навигаций.

Сайдбар вне холста. Использование

Чтобы применить компонент Off-canvas, добавьте атрибут uk-offcanvas к родительскому элементу <div> и используйте следующие классы.

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

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

<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>
  • Открыть

    Заголовок Off-canvas

    Вдруг странный стих во мне родится,
    Я не могу его поймать.
    Какие-то слова и лица.
    И время тает или длится.
    Нет! Невозможно научиться
    Себя и ближних понимать!

    Давид Самойлов
  • <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>Заголовок Off-canvas</h3>
            <blockquote class="uk-text-small">
                <p>Вдруг странный стих во мне родится,<br>
                Я не могу его поймать.<br>
                Какие-то слова и лица.<br>
                И время тает или длится.<br>
                Нет! Невозможно научиться<br>
                Себя и ближних понимать!</p>
                <footer>Давид Самойлов</footer>
            </blockquote>
        </div>
    </div>

Перекрытие : Overlay

Чтобы добавить оверлей, "наложение" перекрывающее страницу, добавьте параметр overlay: true в атрибут uk-offcanvas.

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

Off-canvas и Overlay

  • Фреймворк UIkit 3

    Это было сказано с таким сарказмом, что Леночка поежилась при воспоминании о словах любви. Он никогда не простит его за то, что та посмела влюбиться в другого мужчину.

    Родители лучшей подруги также настаивали на присутствии Гогира, так что ей ничего не оставалось делать, кроме как подчиниться желанию окружающих. Всем стал известен ее роман с мэром городка, где они жили.

  • <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>Фреймворк UIkit 3</h3>
            <p>Это было сказано с таким сарказмом, что Леночка поежилась при воспоминании о словах любви. Он никогда не простит его за то, что та посмела влюбиться в другого мужчину.</p>
            <p>Родители лучшей подруги также настаивали на присутствии Гогира, так что ей ничего не оставалось делать, кроме как подчиниться желанию окружающих. Всем стал известен ее роман с мэром городка, где они жили.</p>
        </div>
    </div>

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

Добавьте параметр flip: true к атрибуту uk-offcanvas, чтобы отрегулировать его расположение так, чтобы открытие происходило с правой стороны.

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

Открытие Off-canvas с правой стороны.

  • Супер заголовок

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

    Жизненный порыв можно сравнить с электрическим разрядом, с метеоритом, который, ослепительно сгорая, рассыпается на части. Трудно было указать какое-нибудь биологическое открытие, обязанное чистому рассуждению. Эти затруднения и эти противоречия происходят потому, что мы применяем обычные формы нашей мысли.

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

  • <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>
            <p>Жизненный порыв можно сравнить с электрическим разрядом, с метеоритом, который, ослепительно сгорая, рассыпается на части. Трудно было указать какое-нибудь биологическое открытие, обязанное чистому рассуждению. Эти затруднения и эти противоречия происходят потому, что мы применяем обычные формы нашей мысли.</p>
            <p>Какой-нибудь сверхчеловеческий разум мог бы вычислить для любого момента положение любой точки.</p>
        </div>
    </div>

Анимационные режимы

По умолчанию панель Off-canvas при появлении "скользит". Вы можете выбирать между различными режимами анимации для появления вне холста. Просто добавьте один из следующих атрибутов.

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

    Она ведет себя очень странно в последнее время, а я не могу от нее добиться ни...

    Таким образом, здесь ничто не создается, ни форма, ни вещество; то, что есть в группе, то и будет, понимая под тем, что есть.

    Название

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

    Это уже не из области мысли, а из области переживаемого. Это уже не отношение, а нечто абсолютное.

    Off-canvas

    Она просто оставляет их в стороне, потому ли, что считает их слишком слабыми, или потому, что сохраняет право заняться ими после.

    Определенные контуры, приписываемые нами предмету, получающему таким образом индивидуальность. Мне даже пришлось отдать тебе платье, чтобы ты не ходила в тех лохмотьях, которые он предпочитает.

    Off-canvas

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

    Она состоит главным образом в констатировании отношений идеального родства и в утверждении, что там, где имеется отношение.

  • <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>
            <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>
            </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>Off-canvas</h3>
            <p>Она просто оставляет их в стороне, потому ли, что считает их слишком слабыми, или потому, что сохраняет право заняться ими после.</p>
            <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>Off-canvas</h3>
            <p>В наши намерения не входит приводить здесь доказательства в пользу трансформизма. Мы укажем только в двух словах, почему в настоящей работе мы принимаем.</p>
            <p>Она состоит главным образом в констатировании отношений идеального родства и в утверждении, что там, где имеется отношение.</p>
        </div>
    </div>

Вы можете использовать компонент навигации Nav внутри панели 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">Primary Nav</button>
    <button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-nav">Default 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>

Параметры компонента

При использовании компонента Off-canvas к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опция Значение По умолчанию Описание
mode String slide Анимационный режим Off-canvas: slide, reveal, push или none.
flip Boolean false Отображение Off-canvas с правой стороны.
overlay Boolean false Отображение Off-canvas вместе с наложением.
esc-close Boolean true Закрытие Off-canvas при нажатии кнопки Esc.
bg-close Boolean true Закрытие Off-canvas при клике на фон.
container String true Define a target container via a selector to specify where the off-canvas should be appended in the DOM. Setting it to false will prevent this behavior.

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

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

JavaScript

Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.

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

UIkit.offcanvas(element, options);

События

Следующие события будут инициированы для элементов компонента:

Название Описание
beforeshow Срабатывает перед отображением элемента.
show Срабатывает после отображения элемента.
shown Запускается после завершения анимации показанного элемента.
beforehide Срабатывает до того, как элемент скрыт.
hide Fires after an item's hide animation has started.
hidden Срабатывает после того, как элемент скрыт.

Методы

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

Show

UIkit.offcanvas(element).show();

Показывает Offcanvas.

Hide

UIkit.offcanvas(element).hide();

Скрывает Offcanvas.

Документация
Компоненты