Компонент Инверсия Inverse

Инвертируйте стиль любого компонента, чтобы улучшить видимость объектов на светлом или темном фоне. Примеры. Руководство.

Применение

Как использовать Inverse в UIkit 3

Добавьте класс .uk-light, чтобы улучшить видимость объектов на темном фоне и применить светлый стиль соответствующим элементам. При необходимости использовать темный стиль, добавьте класс .uk-dark к элементам на светлом фоне.

<div class="uk-light"></div> <!-- для тёмного фона -->

<div class="uk-dark"></div>  <!-- для светлого фона -->

  • Light

    Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.

    Dark

    Всякое движение производила она со вкусом, даже любила стихи, даже иногда мечтательно умела держать голову.

  • <div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-light uk-background-secondary uk-padding">
            <h3>Light</h3>
            <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
            <button class="uk-button uk-button-default">Кнопка</button>
        </div>
    </div>
    <div>
        <div class="uk-dark uk-background-muted uk-padding">
            <h3>Dark</h3>
            <p>Всякое движение производила она со вкусом, даже любила стихи, даже иногда мечтательно умела держать голову.</p>
            <button class="uk-button uk-button-default">Кнопка</button>
        </div>
    </div>
</div>
Примечание Некоторые модификаторы из компонентов автоматически инвертируются, поэтому вам не нужно добавлять какой-либо класс.

Настройка с помощью Less

Компонент Инверсия включает дополнительные стили для реализации гибкого "инверсивного" поведения.

Если ваш проект не использует эти стили, вы можете оставить отключенным компонент Инверсия при компиляции Less.
Inverse