Компонент Классы видимости
Используйте адаптивные классы видимости для отображения или скрытия элементов на разных устройствах. Отображение только при наведении или фокусе. Скрытие элементов на сенсорных устройствах.
Visibility: Руководство
Использование компонента Visibility
Добавьте один из этих классов, чтобы скрыть элемент.
| Класс | Описание |
|---|---|
.uk-hidden |
Скрывает элемент на любом устройстве. Рекомендуется использовать атрибут hidden. |
.uk-invisible |
Скрывает элемент, оставляя пространство / место, где он должен быть. |
.uk-hidden-visually |
Визуально скрывает содержимое, оставляя контент для вспомогательных технологий, таких как программы чтения с экрана. |
<div hidden></div>
<div class="uk-invisible"></div>
Адаптивность
Компонент Visibility предоставляет адаптивные классы для скрытия или отображения элементов на разных разрешениях экрана.
Hidden: Скрыть элемент
Добавьте один из классов .uk-hidden-*, чтобы скрыть элемент с экранов,
размер которых превышает указанную ширину.
| Класс | Описание |
|---|---|
uk-hidden@s |
Влияет только на ширину устройства от 640px и более. |
uk-hidden@m |
Влияет только на ширину устройства от 960px и более. |
uk-hidden@l |
Влияет только на ширину устройства от 1200px и более. |
uk-hidden@xl |
Влияет только на ширину устройства от 1600px и более. |
<!-- Скрывает на планшетах и более -->
<div class="uk-hidden@m"></div>
Visible: Показать элемент
Используйте классы .uk-visible-*, чтобы показать элемент, для экранов размер которых превышает указанную ширину.
| Класс | Описание |
|---|---|
uk-visible@s |
Влияет только на ширину устройства от 640px и более. |
uk-visible@m |
Влияет только на ширину устройства от 960px и более. |
uk-visible@l |
Влияет только на ширину устройства от 1200px и более. |
uk-visible@xl |
Влияет только на ширину устройства от 1600px и более. |
<!-- Видимость на планшетах и более -->
<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">XLarge</div>
<div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@xl">✔ XLarge</div>
</div>
</div>
</div>Переключить видимость
Toggle
Чтобы элементы отображались только при наведении или фокусе
добавьте класс .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, пока нет наведения
Invisible, пока нет наведения
<div class="uk-child-width-1-2@s" uk-grid>
<div class="uk-visible-toggle" tabindex="-1">
<h4>Hidden, пока нет наведения</h4>
<div uk-grid>
<div class="uk-width-expand">Душа моя озарена неземной радостью, как эти чудесные утра.</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, пока нет наведения</h4>
<div uk-grid>
<div class="uk-width-expand">Душа моя озарена неземной радостью, как эти чудесные утра.</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 для скрытия элементов на сенсорных устройствах и .uk-hidden-notouch для скрытия элементов на устройствах без сенсорного экрана.
<!-- Hidden на сенсорных устройствах -->
<div class="uk-hidden-touch"></div>
<!-- Hidden на устройствах не сенсорных -->
<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>