跳至主要内容

文档

切换

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

用法

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

切换可用于向项目添加或删除类或属性。默认情况下，它会添加 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-* 类到 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 属性并应用以下值之一。

值 描述
hover 悬停时将触发切换。
click 点击时将触发切换。这是默认值。
click, hover 点击和悬停时将触发切换。
media 切换行为取决于视窗宽度。 更多信息. 
<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 属性。如果给出多个类，则其他类在状态更改时简单地被切换。

组件选项

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

选项 值 默认值 描述
target 字符串 false 要切换的元素的 CSS 选择器。
mode 字符串 click 逗号分隔的触发行为模式列表。（hover、click、media）
cls 字符串 false 被切换的类。默认为 hidden 属性。
media 数字，字符串 false 在 media 模式下，触发切换的断点 - 宽度为整数（例如 640）或断点（例如 @s、@m、@l、@xl）或任何有效的媒体查询（例如 (min-width: 900px)）。
animation 字符串 false 空格分隔的 动画 名称。逗号分隔的动画出。
duration 数字 200 动画持续时间，以毫秒为单位。
queued 布尔值 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 角色、状态和属性。