Компонент Сайдбар вне холста 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) контейнера offcanvas. Если вы используете другой элемент, например кнопку, просто добавьте атрибут uk-toggle="target: #ID", указав идентификатор контейнера offcanvas. 

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

Перекрытие. Затемнение

Чтобы при открытии панели Off-canvas добавить оверлей, наложение перекрывающее страницу, добавьте параметр 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»

Открытие Offcanvas с правой стороны

Добавьте параметр 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>
        <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>

Offcanvas Меню

Вы можете использовать компонент навигационного меню 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);

События

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

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

Методы

Для компонента «Off-canvas» доступны следующие методы:

Show

UIkit.offcanvas(element).show();

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

Hide

UIkit.offcanvas(element).hide();

Скрывает Offcanvas.

Доступность

Компонент Offcanvas придерживается Dialog (Modal) Pattern и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.

  • У панели offcanvas (offcanvas bar) есть роль dialog, а если у offcanvas есть оверлей, свойство aria-modal.

Компонент Close автоматически устанавливает соответствующие роли и свойства WAI-ARIA.

  • Значок закрытия имеет свойство aria-label, а если используется элемент <a>, то роль button.

Взаимодействие с клавиатурой

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

  • esc закрывает offcanvas. Это поведение отключено, если параметр bg-close: false установлен.