可见性
使用响应式可见性类在不同设备上显示或隐藏元素。
用法
添加以下类之一来隐藏元素。
| 类 | 描述 |
|---|---|
.uk-hidden |
在任何设备上隐藏元素。这更多的是一个遗留类。推荐的方法是使用 hidden 属性。 |
.uk-invisible |
隐藏元素，但不将其从文档流中移除。 |
<div hidden></div>
<div class="uk-invisible"></div>响应式
此组件提供响应式类，用于在不同视口上隐藏或显示元素。
隐藏
添加 .uk-hidden-* 类之一，以隐藏屏幕大于指定宽度的元素。
| 类 | 描述 |
|---|---|
uk-hidden@s |
仅影响宽度为 640px 或更大的设备。 |
uk-hidden@m |
仅影响宽度为 960px 或更大的设备。 |
uk-hidden@l |
仅影响宽度为 1200px 或更大的设备。 |
uk-hidden@xl |
仅影响宽度为 1600px 或更大的设备。 |
<!-- Hidden on tablets and larger -->
<div class="uk-hidden@m"></div>注意 在此示例中，绿色元素在大于定义断点的屏幕上被隐藏。调整浏览器窗口大小以查看效果。
✔ 小型
小型
✔ 中型
中型
✔ 大型
大型
✔ 超大型
超大型
<div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" uk-grid>
<div>
<div class="uk-panel">
<div class="uk-alert uk-margin-remove uk-alert-success">✔ Small</div>
<div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@s">Small</div>
</div>
</div>
<div>
<div class="uk-panel">
<div class="uk-alert uk-margin-remove uk-alert-success">✔ Medium</div>
<div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@m">Medium</div>
</div>
</div>
<div>
<div class="uk-panel">
<div class="uk-alert uk-margin-remove uk-alert-success">✔ Large</div>
<div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@l">Large</div>
</div>
</div>
<div>
<div class="uk-panel">
<div class="uk-alert uk-margin-remove uk-alert-success">✔ X-Large</div>
<div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@xl">X-Large</div>
</div>
</div>
</div>
可见
使用 .uk-visible-* 类显示屏幕大于指定宽度的元素。
| 类 | 描述 |
|---|---|
uk-visible@s |
仅影响宽度为 640px 或更大的设备。 |
uk-visible@m |
仅影响宽度为 960px 或更大的设备。 |
uk-visible@l |
仅影响宽度为 1200px 或更大的设备。 |
uk-visible@xl |
仅影响宽度为 1600px 或更大的设备。 |
<!-- Visible on tablets and larger -->
<div class="uk-visible@m"></div>注意 在此示例中，绿色元素在大于定义断点的屏幕上显示。调整浏览器窗口大小以查看效果。
小型
✔ 小型
中型
✔ 中型
大型
✔ 大型
超大型
✔ 超大型
<div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" uk-grid>
<div>
<div class="uk-panel">
<div class="uk-alert uk-margin-remove">Small</div>
<div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@s">✔ Small</div>
</div>
</div>
<div>
<div class="uk-panel">
<div class="uk-alert uk-margin-remove">Medium</div>
<div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@m">✔ Medium</div>
</div>
</div>
<div>
<div class="uk-panel">
<div class="uk-alert uk-margin-remove">Large</div>
<div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@l">✔ Large</div>
</div>
</div>
<div>
<div class="uk-panel">
<div class="uk-alert uk-margin-remove">X-Large</div>
<div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@xl">✔ X-Large</div>
</div>
</div>
</div>切换
要仅在悬停或聚焦时显示元素，请将 .uk-visible-toggle 类添加到父元素，并将以下类之一添加到应隐藏的任何子元素。
| 类 | 描述 |
|---|---|
.uk-hidden-hover |
隐藏时，该元素将从文档流中移除。 |
.uk-invisible-hover |
隐藏时，该元素不会从文档流中移除。 |
当父元素被悬停或聚焦时，子元素将显示。将 tabindex="0" 添加到父元素，使其可以通过键盘导航和在触摸设备上接收焦点。
如果隐藏的子元素中有 a 或 button 元素，它们已经可以通过键盘导航进行聚焦，并会使子元素出现。因此，请添加 tabindex="-1"，以便父元素在触摸设备上仍然可以聚焦。
<div class="uk-visible-toggle" tabindex="0">
<div class="uk-hidden-hover"></div>
</div>未悬停时隐藏
未悬停时不可见
<div class="uk-child-width-1-2@s" uk-grid>
<div class="uk-visible-toggle" tabindex="-1">
<h4>Hidden when not hovered</h4>
<div uk-grid>
<div class="uk-width-expand">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="uk-width-auto">
<ul class="uk-hidden-hover uk-iconnav">
<li><a href="#" uk-icon="icon: pencil"></a></li>
<li><a href="#" uk-icon="icon: copy"></a></li>
<li><a href="#" uk-icon="icon: trash"></a></li>
</ul>
</div>
</div>
</div>
<div class="uk-visible-toggle" tabindex="-1">
<h4>Invisible when not hovered</h4>
<div uk-grid>
<div class="uk-width-expand">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="uk-width-auto">
<ul class="uk-invisible-hover uk-iconnav">
<li><a href="#" uk-icon="icon: pencil"></a></li>
<li><a href="#" uk-icon="icon: copy"></a></li>
<li><a href="#" uk-icon="icon: trash"></a></li>
</ul>
</div>
</div>
</div>
</div>触摸
添加 .uk-hidden-touch 类以在触摸设备上隐藏元素，并添加 .uk-hidden-notouch 以在没有触摸屏的设备上隐藏元素。
<!-- Hidden on touch devices -->
<div class="uk-hidden-touch"></div>
<!-- Hidden on no-touch devices -->
<div class="uk-hidden-notouch"></div>✔ 隐藏触摸
隐藏触摸
✔ 隐藏非触摸
隐藏非触摸
<div class="uk-grid-small uk-child-width-1-2 uk-child-width-auto@s uk-text-center" uk-grid>
<div>
<div class="uk-panel">
<div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden Touch</div>
<div class="uk-alert uk-position-cover uk-margin-remove uk-hidden-touch">Hidden Touch</div>
</div>
</div>
<div>
<div class="uk-panel">
<div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden No-Touch</div>
<div class="uk-alert uk-position-cover uk-margin-remove uk-hidden-notouch">Hidden No-Touch</div>
</div>
</div>
</div>