可见性／Visibility

# 可见性／Visibility

<p class="uk-text-lead">使用响应式可见性class在不同设备上显示或隐藏的元素。</p>

## Usage-用法

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

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

```html
<div hidden></div>

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

***

## Responsive-响应式

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

### 隐藏

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

| Class          | 描述                                        |
|:---------------|:---------------------------------------------------|
| `uk-hidden@s`  | 仅影响 _640px_ 及以上的设备宽度。  |
| `uk-hidden@m`  | 仅影响 _960px_ 及以上的设备宽度。  |
| `uk-hidden@l`  | 仅影响 _1200px_ 及以上的设备宽度。 |
| `uk-hidden@xl` | 仅影响 _1600px_ 及以上的设备宽度。 |

```html
<!-- Hidden on tablets and larger -->
<div class="uk-hidden@m"></div>
```

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

```example
<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           | 描述                                        |
|:----------------|:---------------------------------------------------|
| `uk-visible@s`  | 仅影响 _640px_ 及以上的设备宽度。  |
| `uk-visible@m`  | 仅影响 _960px_ 及以上的设备宽度。  |
| `uk-visible@l`  | 仅影响 _1200px_ 及以上的设备宽度。 |
| `uk-visible@xl` | 仅影响 _1600px_ 及以上的设备宽度。 |

```html
<!-- Visible on tablets and larger -->
<div class="uk-visible@m"></div>
```

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

```example
<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>
```

***

## Toggle-切换

要仅在鼠标悬停或处于焦点时才显示元素，请将 `.uk-visible-toggle` class添加到父元素，并将以下类之一添加到想要隐藏的任意子元素。

| Class                 | 描述                                                    |
|:----------------------|:---------------------------------------------------------------|
| `.uk-hidden-hover`    | 隐藏该元素后，该元素将从文档流中删除。     |
| `.uk-invisible-hover` | 隐藏该元素后，该元素不会从文档流中删除。 |

当父元素在鼠标悬停或处于焦点时，将显示子元素。添加 `tabindex="0"` 到父元素，以使其可以通过键盘导航和在触摸设备上获得焦点。

如果隐藏的子元素中包含了 `a` 或 `button` 元素，则它们也可以通过键盘导航进行聚焦，这样会使子元素出现。为了避免这种情况，可以添加 `tabindex="-1"` 使父元素仍可集中在触摸设备上。

```html
<div class="uk-visible-toggle" tabindex="0">
    <div class="uk-hidden-hover"></div>
</div>
```

```example
<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>
```

***

## Touch-触摸

添加 `.uk-hidden-touch` class用来隐藏触摸设备上的元素， `.uk-hidden-notouch` 用来隐藏非触摸屏设备上的元素。

```html
<!-- Hidden on touch devices -->
<div class="uk-hidden-touch"></div>

<!-- Hidden on no-touch devices -->
<div class="uk-hidden-notouch"></div>
```

```example
<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>
```