Компонент Классы видимости 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>
- Small✔ SmallMedium✔ MediumLarge✔ LargeXLarge✔ XLarge
-
<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>
- ✔ Hidden TouchHidden Touch✔ Hidden No-TouchHidden 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>