跳过到主要内容

文档

可见性

使用响应式可见性类在不同设备上显示或隐藏元素。

用法

添加以下类之一以隐藏元素。

类 描述
.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>

  • 未悬停时隐藏

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    未悬停时不可见

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • <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>