Off-canvas

创建从页面侧边滑入滑出的抽屉式侧边栏（off-canvas），非常适合用来制作移动端导航。

用法

要使用该组件，为父级 <div> 元素添加 uk-offcanvas 属性，并使用以下类。

类	描述
`.uk-offcanvas-bar`	将该类添加到子级 `<div>` 元素上。
`.uk-offcanvas-close`	将该类和 `uk-close` 属性添加到 `<a>` 或 `<button>` 元素上，以创建关闭按钮并启用其功能。

可以使用任意元素来切换抽屉式侧边栏。要启用所需的 JavaScript，添加 uk-toggle 属性。<a> 元素需要链接到抽屉容器的 id。如果使用其他元素，例如按钮，只需添加 uk-toggle="target: #ID" 属性，指向抽屉容器的 id。

<body>

    <!-- This is a button toggling the off-canvas -->
    <button uk-toggle="target: #my-id" type="button"></button>

    <!-- This is an anchor toggling the off-canvas -->
    <a href="#my-id" uk-toggle></a>

    <!-- This is the 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>

Open

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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

<a href="#offcanvas-usage" uk-toggle>Open</a>

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

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

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

遮罩

要添加遮罩以让页面变暗，为 uk-offcanvas 属性添加 overlay: true 参数。

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

Title

<button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-overlay">Open</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>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

翻转修饰符

为 uk-offcanvas 属性添加 flip: true 参数以调整其对齐方式，使其从右侧滑入。

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

Title

<button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-flip">Open</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>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

动画模式

默认情况下，抽屉以滑入方式出现。但实际上你还可在抽屉入场时选择不同的动画模式。只需添加以下任意一个属性。

参数	描述
`mode: slide`	抽屉滑出并覆盖在内容之上。这是默认模式。
`mode: push`	抽屉滑出并将站点内容推开。
`mode: reveal`	抽屉滑出，在推开站点内容的同时显示自身内容。
`mode: none`	抽屉直接出现并覆盖在内容之上，没有动画。

<div id="my-id" uk-offcanvas="mode: push">…</div>

Title

<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>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</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>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</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>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</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>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

抽屉中的导航

可以在抽屉内使用 Nav 组件来创建移动端导航。

<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="#">Active</a></li>
            <li class="uk-parent">
                <a href="#">Parent</a>
                <ul class="uk-nav-sub">
                    <li><a href="#">Sub item</a></li>
                    <li><a href="#">Sub item</a></li>
                </ul>
            </li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
            <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</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="#">Active</a></li>
            <li class="uk-parent">
                <a href="#">Parent</a>
                <ul class="uk-nav-sub">
                    <li><a href="#">Sub item</a></li>
                    <li><a href="#">Sub item</a></li>
                </ul>
            </li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
            <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
        </ul>

    </div>
</div>

组件选项

以下任意选项都可以应用到组件属性上。多个选项之间用分号分隔。了解更多

选项	值	默认值	描述
`mode`	String	`slide`	抽屉动画模式（`slide`、`reveal`、`push` 或 `none`）。
`flip`	Boolean	`false`	将抽屉翻转到右侧。
`overlay`	Boolean	`false`	显示抽屉时同时显示遮罩。
`esc-close`	Boolean	`true`	按下 Esc 键时关闭抽屉。
`bg-close`	Boolean	`true`	点击背景时关闭抽屉。
`container`	String	`false`	通过选择器指定目标容器，以确定抽屉应被附加到 DOM 中的位置。设置为 `false` 会阻止这一行为。

mode 是 Primary 选项，如果它是属性值中唯一的选项，其键名可以省略。

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

JavaScript

了解关于 JavaScript 组件的更多内容。

初始化

UIkit.offcanvas(element, options);

事件

以下事件会在绑定了该组件的元素上触发：

名称	描述
`beforeshow`	在项目被显示之前触发。
`show`	在项目被显示之后触发。
`shown`	在项目的显示动画完成之后触发。
`beforehide`	在项目被隐藏之前触发。
`hide`	在项目的隐藏动画开始之后触发。
`hidden`	在项目被隐藏之后触发。