跳到主要内容

文档

切换

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

用法

要应用此组件，只需将 uk-toggle="target: #ID" 属性添加到 <button> 或 <a> 元素。 您可以将任何选择器与 toggle 属性一起使用。

切换可用于添加或删除项目的类或属性。 默认情况下，它会添加 hidden 属性以隐藏元素。

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

最近怎么样？

<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>

多个项目

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

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

你好！

<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 属性，您也可以切换自定义类。 只需将 cls: CLASS 选项添加到 uk-toggle 属性。 在此示例中，我们使用 .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>
自定义类
<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>

动画

切换组件允许您在切换项目时为其添加动画。 只需将 动画组件 中的 .uk-animation-* 类添加到动画参数即可。 该类将应用于进入和退出动画。 如果您想要不同的动画，只需添加另一个类即可。

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-fade"></button>
<p id="my-id"></p>
动画
<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>

多个动画

您也可以应用来自 动画组件 的多个动画。 这样您就可以添加不同的进入和退出动画。

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-slide-left, uk-animation-slide-bottom"></button>
<p id="my-id"></p>
动画
<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>

排队动画

当使用动画切换多个项目时，您可能希望等待第一个动画运行完毕后再为第二个项目添加动画。 为此，只需将 queued: true 选项添加到 uk-toggle 属性即可。

<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>

动画

<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>

模式

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

值 描述
悬停 切换将在悬停时触发。
单击 切换将在单击时触发。 这是默认值。
单击，悬停 切换将在单击和悬停时触发。
媒体 切换行为取决于视口宽度。更多信息。 
<button type="button" uk-toggle="target: #my-id; mode: hover"></button>
<p id="my-id"></p>

最近怎么样？

<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 选项。 例如，添加一个以像素为单位的数字，例如 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>
大屏幕上的主要内容
<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 属性。 如果给出了多个类，则其他类只是在状态更改时被切换。

组件选项

这些选项中的任何一个都可以应用于组件属性。 使用分号分隔多个选项。了解更多

选项 值 默认值 描述
目标 字符串 false 要切换的元素的 CSS 选择器。
模式 字符串 单击 触发行为模式的逗号分隔列表。(hover、click、media)
cls 字符串 false 正在切换的类。默认为 hidden 属性。
媒体 数字、字符串 false 在媒体模式下，触发切换的断点 - 一个整数宽度（例如 640）或一个断点（例如 @s、@m、@l、@xl）或任何有效的媒体查询（例如 (min-width: 900px)）。
动画 字符串 false 动画的空格分隔名称。用逗号分隔表示退出动画。
持续时间 数字 200 动画持续时间（以毫秒为单位）。
排队 布尔值 true 连续切换目标。

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

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

JavaScript

了解有关 JavaScript 组件的更多信息。

初始化

UIkit.toggle(element, options);

事件

以下事件将在附加此组件的元素上触发

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

方法

以下方法可用于该组件

切换

UIkit.toggle(element).toggle();

切换切换的目标。

辅助功能

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