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

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

Cуществуют стили UIkit со светлым фоном, например стиль UIkit по умолчанию, или стили с темным фоном. В зависимости от цвета фона, цвет текста по умолчанию будет либо темным, либо светлым. Когда используются разные цвета фона или фоновые изображения, может потребоваться противоположный цвет текста. Используйте данный компонент, чтобы инвертировать цвет текста.

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>

Расширение компонентов

Модификаторы стиля из компонентов, которые создают фон, таких как Section, Tile, Card, Overlay, Off-canvas, Navbar, Dropdown и Dropbar автоматически инвертируются для изменения цвета текста, поэтому нет необходимости добавлять какой-либо класс.

Компоненты Section и Tile могут предотвратить такое поведение. Просто добавьте класс .uk-preserve-color. Это нужно, например, когда они содержат cards. 

<div class="uk-section uk-section-primary uk-preserve-color"></div>

<div class="uk-tile uk-tile-primary uk-preserve-color"></div>

Section Primary с картами

Добавили класс .uk-light для изменения цвета текста на тёмном фоне.

Заголовок карты

Если не будет класса .uk-preserve-color, то заголовок карты сольётся с фоном.

<div class="uk-section uk-section-primary uk-preserve-color">
    <div class="uk-container">

        <div class="uk-panel uk-light uk-margin-medium">
            <h3>Section Primary с картами</h3>
            <p>Добавили класс <code>.uk-light</code> для изменения цвета текста на тёмном фоне.</p>
        </div>

        <div class="uk-card uk-card-default uk-card-body">
        	<h3 class="uk-card-title">Заголовок карты</h3>
        	<p>Если не будет класса <code>.uk-preserve-color</code>, то заголовок карты сольётся с фоном.</p>
        </div>

    </div>
</div>

Tile Primary за словесными горами в стране гласных и согласных.

Заголовок карточки

Далеко одна маленькая строчка рыбного текста.

Tile Secondary решила выйти в большой мир грамматики.

Заголовок с карточкой

Ручеек журчит по всей стране с правилами.

<div class="uk-child-width-1-2@s uk-grid-collapse uk-grid-match uk-text-center" uk-grid>
    <div>
    	
        <div class="uk-tile uk-tile-primary uk-preserve-color">
            <p class="uk-light">Tile Primary за словесными горами в стране гласных и согласных.</p>
            
            <div class="uk-card uk-card-default uk-card-body">
            	<h3>Заголовок карточки</h3>
                <p>Далеко одна маленькая строчка рыбного текста.</p>
            </div>
        </div>
        
    </div>
    <div>
    	
        <div class="uk-tile uk-tile-secondary uk-preserve-color">
            <p class="uk-light">Tile Secondary решила выйти в большой мир грамматики.</p>
            
            <div class="uk-card uk-card-default uk-card-body">
            	<h3>Заголовок с карточкой</h3>
                <p>Ручеек журчит по всей стране с правилами.</p>
            </div>
        </div>
        
    </div>
</div>

Перекрывающийся контент

Классы .uk-light и .uk-dark устанавливаются для элементов контейнера и окрашивают содержащий их контент. Но бывают случаи, когда элементы не вложены, а имеют контекст позиции и перекрывают друг друга. Например, липкая панель навигации перекрывает различные разделы при прокрутке. Чтобы раскрасить контент в зависимости от пересекающихся элементов, добавьте атрибут uk-inverse. Он установит класс .uk-light или .uk-dark в зависимости от того, какая секция находится позади. 

<div class="uk-position-relative">

    <div class="uk-position-top">
        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
            <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse uk-navbar>…</nav>
        </div>
    </div>

    <div class="uk-section uk-section-default">…</div>

    <div class="uk-section uk-section-primary">…</div>

    <div class="uk-section uk-section-muted">…</div>

    <div class="uk-section uk-section-secondary">…</div>

</div>

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

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.

Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.

Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.

Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.

Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить

<style>
#demo-overlapping .uk-dark.uk-navbar-container {background: #ffeab9}
#demo-overlapping .uk-light.uk-navbar-container {background: #005422}
</style>

<div id="demo-overlapping" class="uk-position-relative">

    <div class="uk-position-top">

        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80">
            <nav class="uk-navbar-container" uk-inverse>
                <div class="uk-container">
                    <div uk-navbar>
                        <div class="uk-navbar-left">

                            <ul class="uk-navbar-nav">
                                <li class="uk-active"><a href="#">Активный</a></li>
                                <li>
                                    <a href="#">Родительский</a>
                                    <div class="uk-navbar-dropdown">
                                        <ul class="uk-nav uk-navbar-dropdown-nav">
                                            <li class="uk-active"><a href="#">Активный пункт</a></li>
                                            <li><a href="#">Пункт меню</a></li>
                                            <li class="uk-nav-header">Заголовок</li>
                                            <li><a href="#">Пункт меню</a></li>
                                            <li><a href="#">Пункт меню</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Пункт меню</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a href="/v3/navbar">Пункт навигации</a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="uk-section uk-section-default">
        <div class="uk-container">
        	
        	<p class="uk-margin-medium-top">Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>
        	<p>Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить</p>

        </div>
    </div>

    <div class="uk-section uk-section-primary">
        <div class="uk-container">

        	<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>
        	<p>Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить</p>

        </div>
    </div>

    <div class="uk-section uk-section-muted">
        <div class="uk-container">

        	<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>
        	<p>Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить</p>

        </div>
    </div>

    <div class="uk-section uk-section-secondary">
        <div class="uk-container">

        	<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>
        	<p>Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить</p>

        </div>
    </div>

</div>

target: SELECTOR

Раскрашивайте несколько частей по отдельности

Чтобы раскрасить разные части внутри контейнера по отдельности, просто добавьте соответствующую опцию target: SELECTOR к атрибуту uk-inverse. 

<div class="uk-position-relative">

    <div class="uk-position-top">
        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
            <nav class="uk-navbar-container uk-navbar-transparent" 
                 uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right" uk-navbar>…</nav>
        </div>
    </div>

    <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
        <div>
            <div class="uk-tile uk-tile-default">…</div>
        </div>
        <div>
            <div class="uk-tile uk-tile-primary">…</div>
        </div>
        <div>
            <div class="uk-tile uk-tile-secondary">…</div>
        </div>
    </div>

</div>

Над столом, где были разложены образцы.

Держалось готовое вот-вот разве окончательно.

Это не было сном. Его комната, настоящая.

  • Держалось готовое вот-вот разве окончательно.

  • Это не было сном. Его комната, настоящая.

  • Над столом, где были разложены образцы.

  • Держалось готовое вот-вот разве окончательно.

  • Над столом, где были разложены образцы.

  • Это не было сном. Его комната, настоящая.

<style>
#demo-navbar .uk-sticky-fixed .uk-navbar-container {background: rgb(52 66 116 / 15%)}
#demo-navbar .uk-dark .uk-navbar-nav>li.uk-active>a {color: #c40000;}
</style>

<div id="demo-navbar" class="uk-position-relative">

    <div class="uk-position-top">

        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80">
            <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right">
                <div class="uk-container">
                    <div uk-navbar>
                        <div class="uk-navbar-left">

                            <ul class="uk-navbar-nav">
                                <li class="uk-active"><a href="#">Активный</a></li>
                                <li><a href="#">Пункт</a></li>
                            </ul>

                        </div>
                        <div class="uk-navbar-center">

                            <ul class="uk-navbar-nav">
                                <li class="uk-active"><a href="">Активный</a></li>
                                <li><a href="#">Пункт</a></li>
                            </ul>

                        </div>
                        <div class="uk-navbar-right">

                            <ul class="uk-navbar-nav">
                                <li class="uk-active"><a href="">Активный</a></li>
                                <li><a href="#">Пункт</a></li>
                            </ul>

                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
        <div>

            <div class="uk-tile uk-tile-default">
                <p>Над столом, где были разложены образцы.</p>
            </div>

        </div>
        <div>

            <div class="uk-tile uk-tile-primary">
                <p>Держалось готовое вот-вот разве окончательно.</p>
            </div>

        </div>
        <div>

            <div class="uk-tile uk-tile-secondary">
                <p>Это не было сном. Его комната, настоящая.</p>
            </div>

        </div>
    </div>

    <ul class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
        <li>
            <div class="uk-tile uk-tile-primary">
                <p>Держалось готовое вот-вот разве окончательно.</p>
            </div>
        </li>
        <li>
            <div class="uk-tile uk-tile-muted">
                <p>Это не было сном. Его комната, настоящая.</p>
            </div>
        </li>
        <li>
            <div class="uk-tile uk-tile-default">
                <p>Над столом, где были разложены образцы.</p>
            </div>
        </li>
    </ul>

    <ul class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
        <li>
            <div class="uk-tile uk-tile-muted">
                <p>Держалось готовое вот-вот разве окончательно.</p>
            </div>
        </li>
        <li>
            <div class="uk-tile uk-tile-secondary">
                <p>Над столом, где были разложены образцы.</p>
            </div>
        </li>
        <li>
            <div class="uk-tile uk-tile-primary">
                <p>Это не было сном. Его комната, настоящая.</p>
            </div>
        </li>
    </ul>

</div>

sel-active: SELECTOR

Неактивное состояние

Чтобы элемент не менял свой цвет автоматически, когда он перестает быть прозрачным, просто добавьте опцию sel-active: SELECTOR в атрибут uk-inverse. 

<div uk-sticky="start: 200; animation: uk-animation-slide-top; 
                sel-target: .uk-navbar-container; 
                cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent">
    <nav class="uk-navbar-container" 
         uk-inverse="sel-active: .uk-navbar-transparent" uk-navbar>…</nav>
</div>

Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое. Лежа на панцирнотвердой спине, он видел.

Стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.

Его многочисленные, убого тонкие по сравнению с остальным телом ножки беспомощно копошились у него перед глазами. «Что со мной случилось? » – подумал он. Это не было сном.

Его комната, настоящая, разве что слишком маленькая, но обычная комната, мирно покоилась в своих четырех хорошо знакомых стенах. Над столом, где были разложены распакованные образцы сукон.

<div class="uk-position-relative">

    <div class="uk-position-top">

        <div uk-sticky="start: 170; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent; end: !.uk-position-relative; offset: 80">
            <nav class="uk-navbar-container" uk-inverse="sel-active: .uk-navbar-transparent">
                <div class="uk-container">
                    <div uk-navbar>
                        <div class="uk-navbar-left">

                            <ul class="uk-navbar-nav">
                                <li class="uk-active"><a href="#">Активный</a></li>
                                <li>
                                    <a href="#">Родительский</a>
                                    <div class="uk-navbar-dropdown">
                                        <ul class="uk-nav uk-navbar-dropdown-nav">
                                            <li class="uk-active"><a href="#">Активный пункт</a></li>
                                            <li><a href="#">Пункт меню</a></li>
                                            <li><a href="#">Пункт меню</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a href="#">Пункт</a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="uk-section uk-section-secondary">
        <div class="uk-container">
        	
        	<p>Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое. Лежа на панцирнотвердой спине, он видел.</p>
        	<p>Стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.</p>
        	<p>Его многочисленные, убого тонкие по сравнению с остальным телом ножки беспомощно копошились у него перед глазами. «Что со мной случилось? » – подумал он. Это не было сном.</p>
        	<p>Его комната, настоящая, разве что слишком маленькая, но обычная комната, мирно покоилась в своих четырех хорошо знакомых стенах. Над столом, где были разложены распакованные образцы сукон.</p>

        </div>
    </div>

</div>

uk-inverse- light & dark

Только содержимое, перекрывающееся по цвету

Если содержащий контент должен сохранять цвет текста, а только перекрывающийся контент должен инвертировать свой цвет, используйте классы .uk-inverse-light или .uk-inverse-dark. Они устанавливают --uk-inverse настраиваемому свойству соответствующий цвет, но не окрашивают содержащий его контент. 

<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
    <nav class="uk-navbar-container" uk-navbar>…</nav>
</div>

<div class="uk-section uk-section-primary uk-preserve-color uk-inverse-light">

Section Primary с картами

Его карточка, настоящая, разве что слишком маленькая карта.

Над столом, где были разложены распакованные текстовые образцы.

<div class="uk-position-relative">

    <div class="uk-position-top">

        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80">
            <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse>
                <div class="uk-container">
                    <div uk-navbar>
                        <div class="uk-navbar-left">

                            <ul class="uk-navbar-nav">
                                <li class="uk-active"><a href="#">Активный</a></li>
                                <li>
                                    <a href="#">Родительский</a>
                                    <div class="uk-navbar-dropdown">
                                        <ul class="uk-nav uk-navbar-dropdown-nav">
                                            <li class="uk-active"><a href="#">Активный</a></li>
                                            <li><a href="#">Пункт меню</a></li>
                                            <li class="uk-nav-header">Заголовок</li>
                                            <li><a href="#">Пункт меню</a></li>
                                            <li><a href="#">Пункт меню</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Пункт меню</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a href="#">Родительский</a>
                                    <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
                                        <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
                                            <div>
                                                <ul class="uk-nav uk-navbar-dropdown-nav">
                                                    <li class="uk-active"><a href="#">Активный</a></li>
                                                    <li><a href="#">Пункт меню</a></li>
                                                    <li class="uk-nav-header">Заголовок</li>
                                                    <li><a href="#">Пункт меню</a></li>
                                                    <li><a href="#">Пункт меню</a></li>
                                                    <li class="uk-nav-divider"></li>
                                                    <li><a href="#">Пункт меню</a></li>
                                                </ul>
                                            </div>
                                            <div>
                                                <ul class="uk-nav uk-navbar-dropdown-nav">
                                                    <li class="uk-active"><a href="#">Активный</a></li>
                                                    <li><a href="#">Пункт меню</a></li>
                                                    <li><a href="#">Пункт меню</a></li>
                                                    <li><a href="#">Пункт меню</a></li>
                                                    <li class="uk-nav-divider"></li>
                                                    <li><a href="#">Пункт меню</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="uk-section uk-section-primary uk-preserve-color uk-inverse-light">
        <div class="uk-container">

            <div class="uk-panel uk-light uk-margin-medium">
                <h3>Section Primary с картами</h3>
            </div>

            <div class="uk-grid-match uk-child-width-expand@m" uk-grid>
                <div>
                    <div class="uk-card uk-card-default uk-card-body">
                        <p>Его карточка, настоящая, разве что слишком маленькая карта.</p>
                    </div>
                </div>
                <div>
                    <div class="uk-card uk-card-default uk-card-body">
                        <p>Над столом, где были разложены распакованные текстовые образцы.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

Параметры для атрибута

При использовании компонента Inverse к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Опция Значение По умолчанию Описание
target CSS selector false Список целей, которые будут проверяться.
sel-active CSS selector false Селектор, который должен соответствовать устанавливаемому цвету, в противном случае цвет будет удален. Если этот параметр опущен, цвет всегда будет установлен.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.inverse(element, options);

Отключить инверсный компонент

Компонент Inverse генерирует CSS для окрашивания всех компонентов в соответствующий цвет фона. Если вашему проекту не требуется инвертировать цвета содержимого, вы можете отключить компонент Inverse при компиляции Less.