Компонент Классы видимости 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>
Примечание В этом примере зеленые элементы скрыты на экранах, которые превышают определенную точку останова. Измените размер окна вашего браузера, чтобы увидеть эффект.
  • ✔ Small
    Small
    ✔ Medium
    Medium
    ✔ Large
    Large
    ✔ XLarge
    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 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">✔ XLarge</div>
            <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@xl">XLarge</div>
        </div>
    </div>
</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
    ✔ Small
    Medium
    ✔ Medium
    Large
    ✔ Large
    XLarge
    ✔ 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 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>