Компонент Классы видимости

Используйте адаптивные классы видимости для отображения или скрытия элементов на разных устройствах.

Visibility. Руководство по использованию

Добавьте один из этих классов, чтобы скрыть элемент.

Класс Описание
.uk-hidden Скрывает элемент на любом устройстве.
Рекомендуется использовать атрибут hidden.
.uk-invisible Скрывает элемент, оставляя пространство / место, где он должен быть.
<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>
Документация
Компоненты