UIkit3.x文档

可见性

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

用法

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

Class Description
.uk-hidden 在任何设备上隐藏元素。这是UIkit2遗留的class。推荐的方式是使用hidden属性。
.uk-invisible 只隐藏元素而不将其从文档流中删除。 
<div hidden></div>

<div class="uk-invisible"></div>

响应式

该组件提供响应式class，以隐藏或显示不同视口上的元素。

隐藏

添加一个.uk-hidden-* class以在大于指定宽度的屏幕中隐藏元素。

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

Note在此示例中，绿色元素将在大于定义的宽度断点的屏幕上被隐藏。调整浏览器窗口的大小以查看效果。

  • ✔ 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-* class在大于指定的屏幕宽度时显示元素。

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

Note在此示例中，绿色元素将在大于定义的宽度断点的屏幕上显示。调整浏览器窗口的大小以查看效果。

  • 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 class添加到父元素，并将以下类之一添加到想要隐藏的任意子元素。

Class Description
.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

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Invisible when not hovered

    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 class用来隐藏触摸设备上的元素，.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>