拨动/toggle

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

用法

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

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

示例

Toggle

Code

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

<div id="my-id">...</div>

拨动多个元素

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

示例

Toggle

注意 在这个例子中，我们为其中一个元素添加了 .uk-hidden 类，所以只有另一个元素会显示出来。拨动器会在两个元素之间切换可见状态。

Code

<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 类，你也可以添加你的自定义类。

示例

Toggle

注意 在这个例子中我们使用了 .uk-panel-box-primary 类来切换不同的面板样式。

Code

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

<div id="my-id" class="uk-panel uk-panel-box">...</div>

动画

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

示例

Toggle

Code

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

<div id="my-id">...</div>

JavaScript 选项

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

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