Question

使用一个拨动器来隐藏，切换，或者改变各种内容的外观。

用法

要使用这个组件，只需要添加 data-uk-toggle="{target: #ID}" 属性到一个 <button> 或 <a> 元素中。你可以在任意选择器中使用这个拨动属性。

拨动器会在页面的某元素中添加或者删除一个class类。默认情况下，它会添加 .uk-hidden 类来隐藏这个元素。

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

拨动多个元素

你也可以同时拨动多个元素。使用适当的选择器就行。

<button class="uk-button" data-uk-toggle="{target:'.my-class'}">...</button>
<div class="my-class">...</div>
<div class="my-class uk-hidden">...</div>

自定义class类

如果你不想切换 .uk-hidden 类，你也可以添加你的自定义类。

<button class="uk-button" data-uk-toggle="{target:'#my-id', cls:'uk-panel-box-primary'}">...</button>
<div class="uk-panel uk-panel-box">...</div>

动画

拨动器组件允许你为元素添加拨动的动画效果。只需要添加一个 动画组件 中的 .uk-animation-* 类到 animation 参数中。 元素出现和消失都使用这个类。如果你喜欢不同的动画，只需添加另一个动画类就行了。

<button class="uk-button" data-uk-toggle="{target:'#my-id', animation:'uk-animation-slide-left, uk-animation-slide-bottom'}">...</button>
<div>...</div>

JavaScript 选项

这是一个例子，关于如何通过属性来设置选项:

data-uk-toggle="{target:'#my-id'}"

选项	可能的值	默认值	描述
target	CSS selector	false	被拨动的是哪个元素
cls	string	'uk-hidden'	拨动的class类
animation	mixed	false	任意 uikit 的动画类名