跳到主要内容

文档

Toggle

通过切换器隐藏、切换或改变不同内容的外观。

用法

要应用该组件，只需为 <button> 或 <a> 元素添加 uk-toggle="target: #ID" 属性。你可以在 toggle 属性中使用任意选择器。

切换器可用于为元素添加或移除类或属性。默认情况下，它会添加 hidden 属性来隐藏元素。

<button uk-toggle="target: #my-id" type="button"></button>
<p id="my-id"></p>

What's up?

<div>
    <button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-usage">Toggle</button>
    <p id="toggle-usage">What's up?</p>
</div>

多个项目

你也可以同时切换多个项目。只需在 uk-toggle 属性中添加 target: SELECTOR 选项，并使用适用于所有项目的选择器。

<button type="button" uk-toggle="target: .my-class"></button>
<p class="my-class"></p>
<p class="my-class"></p>

Hello!

<button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle">Toggle</button>
<p class="toggle">Hello!</p>
<p class="toggle" hidden>Bazinga!</p>

注意 在此示例中，我们为其中一个项目添加了 hidden 属性，因此只会显示另一个项目。切换器会在两个元素之间切换可见状态。

自定义类

如果你不想切换 hidden 属性，也可以切换一个自定义类。只需在 uk-toggle 属性中添加 cls: CLASS 选项。此示例中我们使用 .uk-card-primary 类在不同卡片样式之间切换。

<button type="button" uk-toggle="target: #my-id; cls: uk-card-primary"></button>
<p id="my-id" class="uk-card uk-card-default"></p>
Custom class
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-custom; cls: uk-card-primary">Toggle</button>
<div id="toggle-custom" class="uk-card uk-card-default uk-card-body uk-margin-small">Custom class</div>

动画

Toggle 组件允许你在项目之间切换时为其添加动画。只需把 Animation 组件中某个 .uk-animation-* 类添加到 animation 参数中。该类会同时应用于进入和退出的动画。如果你想使用不同的动画，只需再添加一个类。

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-fade"></button>
<p id="my-id"></p>
Animation
<button href="#toggle-animation" class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-animation; animation: uk-animation-fade">Toggle</button>
<div id="toggle-animation" class="uk-card uk-card-default uk-card-body uk-margin-small">Animation</div>

多个动画

你还可以应用 Animation 组件中的多个动画。这样就能为进入和退出设置不同的动画。

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-slide-left, uk-animation-slide-bottom"></button>
<p id="my-id"></p>
Animation
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-animation-multiple; animation:  uk-animation-slide-left, uk-animation-slide-bottom">Toggle</button>
<div id="toggle-animation-multiple" class="uk-card uk-card-default uk-card-body uk-margin-small">Animation</div>

队列动画

带动画切换多个项目时，你可能希望等第一个动画播放完毕后再为第二个项目添加动画。为此，只需在 uk-toggle 属性中添加 queued: true 选项。

<button type="button" uk-toggle="target: .my-class; animation: uk-animation-fade; queued: true"></button>
<p class="my-class"></p>
<p class="my-class"></p>

Animation

<button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle-animation-queued; animation: uk-animation-fade; queued: true; duration: 300">Toggle</button>
<p class="toggle-animation-queued uk-card uk-card-default uk-card-body uk-margin-small">Animation</p>
<p class="toggle-animation-queued uk-card uk-card-primary uk-card-body uk-margin-small" hidden>Animation</p>

模式

切换器可以通过不同方式触发。只需在 uk-toggle 属性中添加 mode 选项，并应用下列值之一。

值 说明
hover 切换器将在悬停时触发。
click 切换器将在点击时触发。这是默认值。
click, hover 切换器将在点击和悬停时触发。
media 切换行为取决于视口宽度。更多信息。 
<button type="button" uk-toggle="target: #my-id; mode: hover"></button>
<p id="my-id"></p>

What's up?

<button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-hover; mode: hover">hover</button>
<p id="toggle-hover">What's up?</p>

Media

使用 media 模式时，还必须添加 media 选项并为其指定一个可选值。例如添加一个以像素为单位的数字，如 640，或者一个断点，如 @s、@m、@l 或 @xl。如果没有 target 选项，切换器会把切换状态应用到自身。这意味着它会根据当前显示的视口宽度，在 cls 选项中定义的不同状态之间切换。

<!-- The primary modifier will only be applied on large screens -->

<div class="uk-card uk-card-default" uk-toggle="cls: uk-card-primary; mode: media; media: @l"></div>
Primary on large screens 
<div class="uk-card uk-card-default uk-card-body uk-width-medium" uk-toggle="cls: uk-card-primary; mode: media; media: @l">
    Primary on large screens
</div>

注意 初始切换状态取决于 cls 选项。它要么是以空格分隔的列表中给出的第一个类，要么在设为 false 时使用 hidden 属性。如果给出了多个类，其余类只会在状态变化时被切换。

组件选项

这些选项都可以应用到组件属性上。多个选项之间用分号分隔。了解更多

选项 值 默认值 说明
target String false 要切换的元素的 CSS 选择器。
mode String click 逗号分隔的触发行为模式列表。（hover、click、media）
cls String false 被切换的类。默认为 hidden 属性。
media Boolean, Number, String false 在 media 模式下触发切换的条件——以整数表示的宽度（如 640）、断点（如 @s、@m、@l、@xl）或任意合法的媒体查询（如 (min-width: 900px)）。
animation String false 以空格分隔的动画名称。退出动画用以逗号分隔。
duration Number 200 动画时长，单位为毫秒。
queued Boolean true 依次切换各个目标。

target 是 Primary 选项，如果它是属性值中唯一的选项，可以省略其键名。

<span uk-toggle=".my-class"></span>

JavaScript

了解更多关于 JavaScript 组件的内容。

初始化

UIkit.toggle(element, options);

事件

以下事件会在绑定了该组件的元素上触发：

名称 说明
beforeshow 项目显示之前触发。可以通过在事件上调用 preventDefault() 来阻止显示。
show 项目显示之后触发。
shown 项目的显示动画完成之后触发。
beforehide 项目隐藏之前触发。可以通过在事件上调用 preventDefault() 来阻止隐藏。
hide 项目的隐藏动画开始之后触发。
hidden 项目隐藏之后触发。

方法

该组件提供以下方法：

Toggle

UIkit.toggle(element).toggle();

切换 Toggle 的目标。

可访问性

Toggle 组件会自动设置恰当的 WAI-ARIA 角色、状态和属性。