Видимость

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

Использование компонента

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

Класс Описание
.uk-hidden Скрывает элемент на любом устройстве, удаляет иго из потока.
.uk-invisible Скрывает элемент, не удаляя его из потока. 
<div hidden></div>

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

Адаптивность

Этот компонент предоставляет адаптивные классы для скрытия или отображения элементов на различных разрешениях экранов.

Скрытие

Добавьте один из классов семейства .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>

Видимость

Используйте классы семейства .uk-visible-* для отображения элементов на различных разрешениях экранов:

Класс Описание
uk-visible@s Работает на устройствах с шириной экрана от 640px и больше.
uk-visible@m Работает на устройствах с шириной экрана от 960px и больше.
uk-visible@l Работает на устройствах с шириной экрана от 1200px и больше.
uk-visible@xl Работает на устройствах с шириной экрана от 1600px и больше. 
<!-- Элемент виден на планшетах и больших экранах -->
<div class="uk-visible@m"></div>

Внимание В этом примере зеленые элементы отображаются на экранах, которые превышают определенную контрольную точку (breakpoint). Измените размер окна браузера, чтобы применить эффект.

  • 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>

Отображение при наведении

Используйте один из следующих классов, чтобы отображать элементы только тогда, когда на них навели мышкой.

Класс Описание
.uk-visible-toggle Добавьте этот класс к любому родительскому элементу элемента, чтобы скрыть. При наведении дочерний элемент будет появляться.
.uk-hidden-hover Добавьте этот класс в дочерний элемент, чтобы скрыть содержимое и удалить его из потока.
.uk-invisible-hover Добавьте этот класс в дочерний элемент, чтобы скрыть содержимое, не удаляя его из потока. 
<div class="uk-visible-toggle">
    <div class="uk-hidden-hover"></div>
</div>

  • Скрыто, когда элемент не наведена мышь

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Невидимо, когда на элемент не наведена мышь

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!
  • <div class="uk-child-width-1-2@s" uk-grid>
    <div class="uk-visible-toggle">

        <h4>Скрыто, когда элемент не наведена мышь </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">

        <h4>Невидимо, когда на элемент не наведена мышь</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, чтобы скрыть элементы на устройствах без сенсорного экрана.

<!-- Скрыто на тачскринах -->
<div class="uk-hidden-touch"></div>

<!-- Скрыто на устройствах без тачскринов -->
<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>