Компонент Инверсия 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.