切换

通过切换来隐藏、切换或更改不同内容的显示。

用法

要应用此组件，只需将data-uk-toggle="{target: #ID}"属性添加到<button>或<a>元素。您可以使用带有切换属性的任何选择器。

切换将从项目添加或删除一个类。默认情况下，它会添加.uk-hidden类来隐藏元素。

示例

切换

示例

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

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

多个项目

您还可以同时切换多个项目。只需使用适当的选择器即可。

示例

切换

注意 在此示例中，我们向其中一个项目添加了.uk-hidden类，以便仅显示另一个项目。切换将切换两个元素之间的可见状态。

标记

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

<div class="my-class">...</div>
<div class="my-class uk-hidden">...</div>

自定义类

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

示例

切换

注意 在此示例中，我们使用.uk-panel-box-primary类在不同的面板样式之间切换。

标记

<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参数即可。该类将应用于进入和退出动画。如果您更喜欢不同的退出动画，只需添加另一个类。

示例

切换

标记

<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'}"