抽屉/Off-canvas

创建一个可以在页面上平滑地滑入滑出的抽屉。

抽屉完美适用于构建移动端导航,与那些颇受欢迎的许多原生手机应用类似,在其左上角用一个按钮来开关带有菜单的侧边栏。

用法

抽屉组件由一个遮罩层和一个弹出边栏组成。

Class 描述
.uk-offcanvas 添加该类至一个<div>元素来创建隐藏在页面外的边栏容器和覆盖层。id也需要添加,使抽屉可被打开或关闭。
.uk-offcanvas-bar 添加该类至一个子级 <div> 元素来创建抽屉式边栏。

你可以使用任何元素来切换抽屉式侧边栏。 <a>元素需要链接至抽屉容器的id。为了使必要的JavaScript生效,仅需添加data-uk-offcanvas属性即可。如果你使用了其他元素,比如按钮,仅需添加 data-uk-offcanvas="{target:'#ID'}" 属性指向抽屉容器的id。

示例

打开
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

<!-- 这是开关抽屉式边栏的锚 -->
<a href="#my-id" data-uk-offcanvas>...</a>

<!-- 这是开关抽屉式边栏的按钮 -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- 抽屉式边栏 -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">...</div>
</div>

翻转修饰

添加 .uk-offcanvas-bar-flip 类至抽屉式边栏,使之从右侧滑出。

示例

Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">...</div>
</div>

抽屉式导航

抽屉式侧边栏可以包含导航栏。添加.uk-nav-offcanvas类来根据抽屉的上下文定义导航菜单的样式。

示例

Code

<!-- 这是用来触发抽屉式边栏的按钮 -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- 抽屉式边栏 -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <ul class="uk-nav uk-nav-offcanvas" data-uk-nav>...</ul>
    </div>
</div>

抽屉式面板

你可以在抽屉式边栏的内部放置任何自定义内容。仅需将其包裹在带有.uk-panel类的<div>元素中即可。

示例

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

<!-- 这是用来触发抽屉式边栏的按钮 -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- 这是抽屉式边栏 -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <div class="uk-panel">...</div>
    </div>
</div>

JavaScript

可以通过JavaScript来打开或关闭抽屉:

// 通过CSS选择器匹配抽屉显示状态
$.UIkit.offcanvas.show('#my-id');

// 隐藏当前所有抽屉。如果你不需要任何动画效果,设置为 true。
$.UIkit.offcanvas.hide([force = false])

事件

事件名称 参数 描述
show.uk.offcanvas event, panel, bar 抽屉显示时触发
hide.uk.offcanvas event, panel, bar 抽屉隐藏时触发