Visibility
使用响应式的可见性类，在不同设备上显示或隐藏元素。
用法
添加下面这些类中的某一个来隐藏元素。
| 类 | 说明 |
|---|---|
.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>注意 在这个示例中，绿色元素会在大于所定义断点的屏幕上被隐藏。调整浏览器窗口大小即可看到效果。
✔ Small
Small
✔ Medium
Medium
✔ Large
Large
✔ X-Large
X-Large
<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>注意 在这个示例中，绿色元素会在大于所定义断点的屏幕上显示。调整浏览器窗口大小即可看到效果。
Small
✔ Small
Medium
✔ Medium
Large
✔ Large
X-Large
✔ X-Large
<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>Hidden when not hovered
Invisible when not hovered
<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>✔ Hidden Touch
Hidden Touch
✔ Hidden No-Touch
Hidden No-Touch
<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>