侧边栏

创建一个平滑的侧边栏，可以在页面内外滑动。

侧边栏组件非常适合构建移动导航，类似于许多原生移动应用程序中流行的导航方式，即左上角的单个按钮可以切换带有菜单的侧边栏。

用法

侧边栏组件由一个覆盖层和一个侧边栏组成。

您可以使用任何元素来切换侧边栏。 <a> 元素需要链接到侧边栏容器的 id。要启用必要的 JavaScript，只需添加 data-uk-offcanvas 属性。如果您使用其他元素（如按钮），只需添加 data-uk-offcanvas="{target:'#ID'}" 属性即可定位侧边栏容器的 id。

示例

标记

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

<!-- This is a button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">...</div>
</div>

动画模式

您可以选择四种不同的动画模式来定义侧边栏的出现方式。

示例

标记

<a href="#my-id" data-uk-offcanvas="{mode:'slide'}">...</a>

<a href="#my-id" data-uk-offcanvas="{mode:'reveal'}">...</a>

<a href="#my-id" data-uk-offcanvas="{mode:'none'}">...</a>

翻转修饰符

将 .uk-offcanvas-bar-flip 类添加到侧边栏以调整其对齐方式，使其从右侧滑入。

示例

标记

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

侧边栏导航

侧边栏可以包含来自 导航组件 的导航。添加 .uk-nav-offcanvas 类以根据侧边栏上下文设置导航样式。

示例

标记

<!-- This is the button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

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

侧边栏面板

您可以将任何自定义内容放置在侧边栏中。只需将其包装在 <div> 中并添加 .uk-panel 类即可。

示例

标记

<!-- This is the button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <div class="uk-panel">...</div>
    </div>
</div>

JavaScript

您可以通过 JavaScript 打开和关闭侧边栏

// Show an off-canvas matching the passed CSS selector
UIkit.offcanvas.show('#my-id');

// Hide any active offcanvas. Set force to true, if you don't want any animation.
UIkit.offcanvas.hide([force = false])

JavaScript 选项

这是一个如何通过属性设置选项的示例

data-uk-offcanvas="{mode:'slide'}"