Инверсия

Инвертируйте стиль любого компонента для светлых или темных фонов.

Как использовать компонент Inverse в UIkit 3. Инвертируем правильно.

Добавьте класс .uk-light для улучшения видимости объектов на темном фоне. Для использовании темного стиля добавьте класс .uk-dark к элементам со светлым фоном.

Внимание Возможно применить только один вариант. Например, при использовании стиля со светлым фоном нужно применять класс .uk-light.

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

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

  • Light

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Dark

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-light uk-background-secondary uk-padding">
            <h3>Light</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button class="uk-button uk-button-default">Button</button>
        </div>
    </div>
    <div>
        <div class="uk-dark uk-background-muted uk-padding">
            <h3>Dark</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button class="uk-button uk-button-default">Button</button>
        </div>
    </div>
</div>

Внимание Некоторые модификаторы из компонентов Section, Card, Tile, Overlay и Off-canvas инвертируются автоматически, поэтому к ним ничего добавлять не нужно.

Кастомизация с применением Less

Компонент Inverse включает дополнительные стили для реализации инверсии. Если вы не будете использовать эти стили, просто отключите их.