抽屉／Off-canvas

创建滑入滑出页面的抽屉式侧边栏，特别适用于创建移动端的导航。

用法

要应用此组件，请将 uk-offcanvas 属性添加到父级 <div> 元素并使用以下class。

Class 描述
.uk-offcanvas-bar 添加到子级 <div> 元素。
.uk-offcanvas-close 将这个class和 uk-close 属性添加到 <a> 或 <button> 元素创建一个关闭按钮。

您可以使用任何元素来切换抽屉式侧边栏。要启用相关的JavaScript，需要添 uk-toggle 属性。 <a> 元素需要链接到抽屉容器的id。如果您使用的不是 <a> 而是其他元素（比如按钮），那么只需添加 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>

遮罩

要添加一个遮罩来遮挡页面，需要将 overlay: true 参数添加到 uk-offcanvas 属性。

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

  • 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" 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>

翻转

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

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

  • 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" 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

    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.

    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.

    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.

    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-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-small-right" uk-icon="icon: table"></span> Item</a></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><span class="uk-margin-small-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-small-right" uk-icon="icon: table"></span> Item</a></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><span class="uk-margin-small-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);

事件

将在附加了此组件的元素上触发以下事件：

Name 描述
beforeshow 在显示元素之前触发。
show 显示一个元素后触发。
shown 元素的显示动画完成后触发。
beforehide 在隐藏元素之前触发。
hide 元素的隐藏动画开始后触发。
hidden 元素被隐藏后触发。

方法

以下方法可用于该组件：

显示

UIkit.offcanvas(element).show();

显示抽屉。

隐藏

UIkit.offcanvas(element).hide();

隐藏抽屉。

上一篇： Notification

下一篇： Overlay

offcanvas.md

# 抽屉／Off-canvas

<p class="uk-text-lead">创建滑入滑出页面的抽屉式侧边栏，特别适用于创建移动端的导航。</p>

## Usage-用法

要应用此组件，请将 `uk-offcanvas` 属性添加到父级 `<div>` 元素并使用以下class。

| Class                   | 描述                                                           |
|:------------------------|:----------------------------------------------------------------------|
| `.uk-offcanvas-bar`     | 添加到子级 `<div>` 元素。                            |
| `.uk-offcanvas-close`   | 将这个class和 `uk-close` 属性添加到 `<a>` 或 `<button>` 元素创建一个关闭按钮。 |

您可以使用任何元素来切换抽屉式侧边栏。要启用相关的JavaScript，需要添 `uk-toggle` 属性。 `<a>` 元素需要链接到抽屉容器的id。如果您使用的不是 `<a>` 而是其他元素（比如按钮），那么只需添加 `uk-toggle="target: #ID"` 属性指向抽屉容器的ID。

```html
<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>
```

```example
<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>
```

***

### 遮罩

要添加一个遮罩来遮挡页面，需要将 `overlay: true` 参数添加到 `uk-offcanvas` 属性。

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

```example
<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>
```

***

## 翻转

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

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

```example
<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`   | 抽屉不带动画地直接显示出来并遮盖页面         |

```html
<div id="my-id" uk-offcanvas="mode: push">...</div>
```

```example
<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 in Offcanvas-抽屉中的导航

您可以在抽屉内使用 [Nav 组件](nav.md) 创建适合移动设备的导航。

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

```example
<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-small-right" uk-icon="icon: table"></span> Item</a></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><span class="uk-margin-small-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-small-right" uk-icon="icon: table"></span> Item</a></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
        </ul>

    </div>
</div>
```

***

## 组件选项

可以在组件属性中使用以下选项，用分号隔开多个选项。 [了解更多](javascript.md#component-configuration)

| 选项    | 可用值   | 默认值 | 描述                                                     |
|:----------|:--------|:--------|:----------------------------------------------------------------|
| `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_ 的选项，如果它是属性中的唯一选项，则可以省略它的键。

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

***

## JavaScript

了解更多 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

```js
UIkit.offcanvas(element, options);
```

### 事件

将在附加了此组件的元素上触发以下事件：

| Name         | 描述                                          |
|:-------------|:-----------------------------------------------------|
| `beforeshow` | 在显示元素之前触发。                      |
| `show`       | 显示一个元素后触发。                        |
| `shown`      | 元素的显示动画完成后触发。 |
| `beforehide` | 在隐藏元素之前触发。                      |
| `hide`       | 元素的隐藏动画开始后触发。   |
| `hidden`     | 元素被隐藏后触发。                      |

### 方法

以下方法可用于该组件：

#### 显示

```js
UIkit.offcanvas(element).show();
```

显示抽屉。

#### 隐藏

```js
UIkit.offcanvas(element).hide();
```

隐藏抽屉。