UIkit off-canvas学习记录

off-canvas是什么？

类似抽屉的一种侧边栏。

哪些元素可以激活off-canvas？

任何元素，比如button或者a链接元素
激活方式如下
只需要用data-uk-offcanvas属性把button链接到抽屉即可。
其中my-id为抽屉的id。

<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

如何创建抽屉？

必选先创建抽屉的容器（父元素)其类为uk-offcanvas。之后再创建抽屉

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

侧边栏抽屉可以用作导航

<!-- 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">
<ul >
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>
</div>

结果如图

image.png

参考

Off-canvas component - UIkit documentation