跳至主要內容

文件

可見性

使用響應式可見性類別，在不同裝置上顯示或隱藏元素。

用法

加入以下其中一個類別來隱藏元素。

類別 描述
.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>