Компонент Утилита : Utility

Коллекция полезных вспомогательных классов Uikit 3 для стилизации вашего контента.

Панель для разделов сайта

Фреймворк UIkit 3 использует блочные панели для выделения определенных разделов вашего контента. Они могут быть расположены в столбцах сетки, например, из компонента Grid.

Для создания панели добавьте к элементу <div> класс .uk-panel.

  • Высокий уровень вовлечения достойных представителей целевой аудитории является четким доказательством простого факта.
    Внедрение современных методик обеспечивает актуальность существующих гибких и административных условий адаптивности.
    В рамках спецификации современных стандартов, разработчики крупнейших компаний, превозмогая сложившуюся непростую ситуацию сайта.
  • <div class="uk-child-width-1-3@s" uk-grid>
        <div>
            <div class="uk-panel">Высокий уровень вовлечения достойных представителей целевой аудитории является четким доказательством простого факта.</div>
        </div>
        <div>
            <div class="uk-panel">Внедрение современных методик обеспечивает актуальность существующих гибких и административных условий адаптивности.</div>
        </div>
        <div>
            <div class="uk-panel">В рамках спецификации современных стандартов, разработчики крупнейших компаний, превозмогая сложившуюся непростую ситуацию сайта.</div>
        </div>
    </div>

Плюшка «Scrollable panel»

Добавьте класс .uk-panel-scrollable, чтобы дать панели фиксированную высоту и сделать ее прокручиваемой, если ее содержимое превышает высоту. Вы также можете добавить один из классов .uk-height-* из компонента «Высота элементов», чтобы применить другую высоту.

  • <div class="uk-panel uk-panel-scrollable">
        <ul class="uk-list">
            <li><label><input class="uk-checkbox" type="checkbox"> Местные всезнайки</label></li>
            <li>
                <label><input class="uk-checkbox" type="checkbox"> Приобретенные свойства</label>
                <ul>
                    <li><label><input class="uk-checkbox" type="checkbox"> Естественные склонности</label></li>
                    <li><label><input class="uk-checkbox" type="checkbox"> Домашнее состояние</label></li>
                    <li>
                        <label><input class="uk-checkbox" type="checkbox"> Пять шиллингов</label>
                        <ul>
                            <li><label><input class="uk-checkbox" type="checkbox"> Нормального типа</label></li>
                            <li><label><input class="uk-checkbox" type="checkbox"> Приобретенный признак</label></li>
                        </ul>
                    </li>
                    <li><label><input class="uk-checkbox" type="checkbox"> Действительность представляет</label></li>
                </ul>
            </li>
            <li><label><input class="uk-checkbox" type="checkbox"> Известный момент</label></li>
            <li><label><input class="uk-checkbox" type="checkbox"> Проявляется спонтанность</label></li>
        </ul>
    </div>

Плавающие элементы и очистка

Создание и очистка плавающих элементов. Плавающие элементы для выравнивания по левой или правой стороне их контейнера. С помощью *-float-* можно группировать элементы на странице, выстраивать в ряд один за другим.

Clearing и Floating : Следующие классы помогут вам настроить основные макеты.

Класс Описание
.uk-float-left Добавьте этот класс, чтобы разместить элемент слева.
.uk-float-right Добавьте этот класс, чтобы разместить элемент справа.
.uk-clearfix Добавьте этот класс в родительский контейнер, чтобы очистить floats.
  • Справа
    Слева
  • <div class="uk-clearfix">
        <div class="uk-float-right">
            <div class="uk-card uk-card-default uk-card-body">Справа</div>
        </div>
        <div class="uk-float-left">
            <div class="uk-card uk-card-default uk-card-body">Слева</div>
        </div>
    </div>

Утилита «Overflow»

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

UIkit 3 предоставляет разные классы для изменения поведения переполненного блочного элемента.

Класс Описание
.uk-overflow-hidden Добавьте этот класс, чтобы обрезать содержимое, которое превышает размеры его контейнера, без предоставления прокрутки.
.uk-overflow-auto Добавьте этот класс, чтобы создать контейнер, обеспечивающий горизонтальную или вертикальную полосу прокрутки всякий раз, когда содержимое элементов шире или выше самого контейнера, если содержимое переполняет блок.
Примечание Класс .uk-overflow-auto полезен, когда приходится обрабатывать таблицы на отзывчивом сайте, которые в какой - то момент могут оказаться слишком большими, широкими. Он также отлично работает с элементами <pre>.
  • Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
    Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул
    Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы
    Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы
  • <div class="uk-overflow-auto uk-height-small">
        <table class="uk-table uk-table-striped uk-table-condensed uk-text-nowrap">
            <thead>
                <tr>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                </tr>
                <tr>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                </tr>
            </tbody>
        </table>
    </div>

Утилита «Overflow Auto»

Добавьте атрибут uk-overflow-auto, класс .uk-overflow-auto (предоставляющий при необходимости вертикальную полосу прокрутки) установится автоматически; будет добавлена минимальная высота элемента.

Хороший пример в действии можно увидеть открыв модальное окно. Это часто используется в модальном окне.

Разметка

<div id="my-id" uk-modal>
    <div class="uk-modal-dialog" uk-overflow-auto></div>
</div>

Пример с модальным окном

  • Открыть модальное окно
  • <a class="uk-button uk-button-default" href="#modal-overflow" uk-toggle>Открыть модальное окно</a>
    <div id="modal-overflow" uk-modal>
        <div class="uk-modal-dialog">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <div class="uk-modal-header">
                <h2 class="uk-modal-title">Модальный заголовок</h2>
            </div>
            <div class="uk-modal-body" uk-overflow-auto>
                <p>В рамках спецификации современных стандартов, некоторые особенности внутренней области являются только методом резинового участия и своевременно верифицированы. Каждый из нас понимает очевидную вещь: высококачественный прототип будущего проекта в значительной степени обусловливает важность системы массового участия. Лишь символы крупнейших сайтов и по сей день остаются уделом работников, которые жаждут быть преданы с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг. Тщательные исследования конкурентов лишь добавляют фракционных разногласий и представлены в исключительно положительном свете. И нет сомнений, что пользователи крупнейших компаний представлены в исключительно положительном свете. Как уже неоднократно упомянуто, стремящиеся вытеснить традиционное умение, нанотехнологии формируют глобальную веб сеть и при этом - заблокированы в рамках своих собственных рациональных ограничений.</p>
    <p>Прежде всего, убеждённость некоторых пользователей, в своём классическом представлении, допускает внедрение экспериментов, поражающих по своей масштабности и грандиозности. Есть над чем задуматься: непосредственные участники технического прогресса могут быть объективно рассмотрены соответствующими умениями. В частности, повестка сегодняшнего дня требует от нас анализа с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг. Но предприниматели в сети интернет представляют собой не что иное, как знак победы маркетинга над разумом и должны быть в равной степени предоставлены сами себе. В рамках спецификации современных стандартов, независимые сайты, вне зависимости от их уровня, должны быть объединены в целые кластеры себе подобных.</p>
    <p>Укрепление и развитие внутренней структуры предполагает независимые способы реализации поэтапного и последовательного развития устройства. В целом, конечно, внедрение современных методик, в своём классическом представлении, допускает внедрение стандартных подходов. С учётом сложившейся обстановки, глубокий уровень погружения предполагает независимые способы реализации системы массового участия.</p>
    <p>Легко сказать, почему представители современных резервов, превозмогая сложившуюся ситуацию, разоблачены. Мы вынуждены отталкиваться от того, что высокое качество позиционных исследований однозначно фиксирует необходимость с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг, которые жаждут быть ассоциативно распределены по отраслям. С другой стороны, постоянный количественный рост и сфера  активности является качественно новой ступенью как самодостаточных, так и внешне зависимых концептуальных решений.</p>
    <p>Принимая во внимание показатели успешности, внедрение современных методик представляет собой интересный эксперимент проверки направлений прогрессивного развития. Задача, в особенности же сайтостроение сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании прогресса профессионального сообщества. Современные технологии достигли такого уровня, что высокое качество позиционных исследований позволяет оценить значение дальнейших направлений развития. Приятно наблюдать, как стремящиеся нанотехнологии призваны к ответу.</p>
    <p>В частности, разбавленное изрядной долей мышление не даёт нам иного выбора, кроме определения своевременного выполнения сверхзадачи. Вот вам яркий пример современных тенденций - укрепление и развитие внутренней структуры создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса направлений прогрессивного развития.</p>
            </div>
            <div class="uk-modal-footer uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button">Сбросить</button>
                <button class="uk-button uk-button-primary" type="button">Сохранить</button>
            </div>
        </div>
    </div>
Опция Значение По умолчанию Описание
selContainer String .uk-modal CSS селектор для элемента контейнера, который обеспечивает высоту.
selContent String .uk-modal-dialog CSS селектор для элемента, который оборачивает внутреннее содержимое, чтобы обеспечить его высоту.

Вы можете изменить высоту цели, добавив в атрибут опции selContainer и selContent.

Пример с целями для прокрутки

  • Какой-то контент перед контейнером «Overflow Auto».

    Какой-то контент после контейнера «Overflow Auto».

  • <div class="uk-height-medium">
        <div class="js-wrapper">
            <p>Какой-то контент перед контейнером «Overflow Auto».</p>
            <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
                <div class="uk-grid-small" uk-grid>
                    <div class="uk-width-1-2"><img src="/demo/img/light.jpg" alt=""></div>
                    <div class="uk-width-1-2"><img src="/demo/img/dark.jpg" alt=""></div>
                    <div class="uk-width-1-2"><img src="/demo/img/photo.jpg" alt=""></div>
                    <div class="uk-width-1-2"><img src="/demo/img/photo2.jpg" alt=""></div>
                </div>
            </div>
            <p>Какой-то контент после контейнера «Overflow Auto».</p>
        </div>
    </div>

Изменение размера : Утилита «Resize»

Эти утилиты предоставляют различные классы для изменения размера элементов.

Класс Описание
.uk-resize Добавьте этот класс, чтобы включить горизонтальное и вертикальное изменение размера.
.uk-resize-vertical Добавьте этот класс, чтобы включить только вертикальное изменение размера.

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

  •             
    <!-- Вертикальное изменение размера -->
    <div uk-grid>
        <div class="uk-width-1-2">...</div>
        <div class="uk-width-1-2">...</div>
    </div>
    
    <div class="uk-child-width-1-2" uk-grid>
        <div></div>
        <div></div>
    </div>
                
            
                
    <!-- Горизонтальное и вертикальное изменение размера -->
    <div uk-grid>
        <div class="uk-width-1-2">...</div>
        <div class="uk-width-1-2">...</div>
    </div>
    
    <div class="uk-child-width-1-2" uk-grid>
        <div></div>
        <div></div>
    </div>
                
            
  • <div class="uk-child-width-1-2@s" uk-grid>
        <div>
            <pre class="uk-resize-vertical">
                <code>
    <!-- Вертикальное изменение размера -->
    <div uk-grid>
        <div class="uk-width-1-2">...</div>
        <div class="uk-width-1-2">...</div>
    </div>
    
    <div class="uk-child-width-1-2" uk-grid>
        <div></div>
        <div></div>
    </div>
                </code>
            </pre>
        </div>
        <div>
            <pre class="uk-resize">
                <code>
    <!-- Горизонтальное и вертикальное изменение размера -->
    <div uk-grid>
        <div class="uk-width-1-2">...</div>
        <div class="uk-width-1-2">...</div>
    </div>
    
    <div class="uk-child-width-1-2" uk-grid>
        <div></div>
        <div></div>
    </div>
                </code>
            </pre>
        </div>
    </div>

Значения свойства «display»

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

Класс Описание
.uk-display-block Заставляет элемент вести себя как блочный элемент.
.uk-display-inline Заставляет элемент вести себя как встроенный элемент.
.uk-display-inline-block Заставляет элемент вести себя как inline-block (нечто: блочно-строчный).

Утилита «Inline»

Эти классы часто используются для создания контекста позиции в контейнере с изображением в качестве дочернего элемента. Контейнер сохраняет тот же размер, что и изображение, а также сохраняется отзывчивое поведение. Таким образом, содержимое, расположенное поверх изображения с Position component, не будет "вытекать" из размеров изображения.

Класс Описание
.uk-inline Добавьте этот класс, чтобы применить поведение встроенного блока к элементу, добавляется max-width 100% и создаётся контекст позиции.
.uk-inline-clip Так же, как .uk-inline, но доплнительно ещё обрезает переполненные дочерние элементы (если превышены размеры).
<div class="uk-inline">
    <img alt="">
    <div class="uk-position-cover"></div>
</div>
  • Overlay
  • <div class="uk-inline">
        <img src="/demo/img/photo.jpg" width="300" alt="">
        <div class="uk-position-medium uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
    </div>

Адаптивные объекты

В UIkit 3 элементы <img>, <canvas>, <audio> и <video> адаптируются к ширине их родительского контейнера по умолчанию. Чтобы применить адаптивное поведение к iframe, добавьте атрибут uk-responsive. Для других элементов или для применения другого поведения вы можете добавить один из следующих классов.

Класс Описание
.uk-responsive-width Добавьте этот класс, чтобы применить адаптивное поведение к любому элементу.
Он регулирует ширину объекта в соответствии с шириной его родителя, сохраняя исходное соотношение сторон.
.uk-responsive-height Добавьте этот класс, чтобы настроить высоту объекта (а не его ширину) в соответствии с высотой его родителя, сохраняя исходное соотношение сторон.
.uk-preserve-width Добавьте этот класс, чтобы избежать адаптивного поведения по умолчанию и сохранить исходные размеры изображения.
Вы также можете добавить класс к родительскому элементу, тогда будет применено ко всем соответствующим элементам, содержащим его. Если вы встраиваете Google Карты на свой сайт, этот вариант может понадобиться для исправления изображений карты.
<img class="uk-responsive-height" src="" alt="">

<iframe src="" width="" height="" frameborder="0" uk-responsive></iframe>

Модификатор «Border radius»

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

Класс Описание
.uk-border-rounded Добавьте этот класс, чтобы применить закругленные углы.
.uk-border-circle Добавьте этот класс, чтобы использовать круглую форму.
.uk-border-pill Добавьте этот класс, чтобы установить форму эллипса, таблетки.

Примеры

  • Border rounded Border circle Border pill
  • <img class="uk-border-rounded" src="/demo/img/avatar.jpg" width="200" height="200" alt="Border rounded">
    <img class="uk-border-circle" src="/demo/img/avatar.jpg" width="200" height="200" alt="Border circle">
    <img class="uk-border-pill" src="/demo/img/avatar.jpg" width="200" height="200" alt="Border pill">
  • Border circle
    Border circle
    Border pill
    Border pill
  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
            <div class="uk-inline">
                <img class="uk-border-circle" data-src="/demo/img/dark.jpg" width="450" height="300" alt="Border circle" uk-img>
                <div class="uk-overlay uk-overlay-default uk-position-center">
                    Border circle
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline">
                <img class="uk-border-pill" data-src="/demo/img/dark.jpg" width="450" height="300" alt="Border pill" uk-img>
                <div class="uk-overlay uk-overlay-default uk-position-center">
                    Border pill
                </div>
            </div>
        </div>
    </div>

Модификатор «Box shadow»

Вы можете применять различные тени к элементам. Если для элемента задается радиус скругления углов добавляемый модификатором «Border radius», то тень также получится с закругленными уголками.

Чтобы добавить тень к элементу, просто добавьте один из следующих классов.

Класс Описание
.uk-box-shadow-small Добавьте этот класс, чтобы применить маленькую тень к элементу.
.uk-box-shadow-medium Добавьте этот класс, чтобы добавить умеренную (среднюю) тень.
.uk-box-shadow-large Добавьте этот класс, чтобы задать элементу большую тень.
.uk-box-shadow-xlarge Добавьте этот класс, чтобы применить к элементу очень большую тень.

Разметка

<div class="uk-box-shadow-small"></div>

Примеры с различными размерами теней

  • Small
    Medium
    Large
    XLarge
  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
        <div>
            <div class="uk-box-shadow-small uk-padding">Small</div>
        </div>
        <div>
            <div class="uk-box-shadow-medium uk-padding">Medium</div>
        </div>
        <div>
            <div class="uk-box-shadow-large uk-padding">Large</div>
        </div>
        <div>
            <div class="uk-box-shadow-xlarge uk-padding">XLarge</div>
        </div>
    </div>
  • + Circle
    + Pill
  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
        <div>
            <div class="uk-box-shadow-medium uk-border-circle uk-padding">+ Circle</div>
        </div>
        <div>
            <div class="uk-box-shadow-medium uk-border-pill uk-padding">+ Pill</div>
        </div>
    </div>

Модификатор «Box shadow bottom»

Чтобы добавить тень к нижней части элемента, так что получится эффект "Парящий", добавьте класс .uk-box-shadow-bottom. Этот класс также можно комбинировать с одним из других модификаторов .uk-box-shadow-*.

<div class="uk-box-shadow-bottom"></div>

Примеры с тенью в нижней части элемента

  • Box shadow bottom
  • <div class="uk-box-shadow-bottom uk-width-1-2@s uk-text-center">
        <div class="uk-background-default uk-padding-large">
            Box shadow bottom
        </div>
    </div>
  • Bottom + Medium
  • <div class="uk-box-shadow-bottom uk-box-shadow-medium uk-width-1-2@s uk-text-center">
        <div class="uk-background-default uk-padding-large">
            Bottom + Medium
        </div>
    </div>

Тень от блока при наведении : Hover

Чтобы применить тень от блока при наведении, добавьте один из следующих классов. Это также может быть использовано для изменения размера тени при наведении. Для этого просто объедините их с одним из классов выше.

Класс Описание
.uk-box-shadow-hover-small Добавьте этот класс, чтобы создать небольшую тень блоку при наведении на него курсором.
.uk-box-shadow-hover-medium Добавьте этот класс, чтобы использовать среднюю тень при наведении.
.uk-box-shadow-hover-large Добавьте этот класс, чтобы применить большую тень при наведении.
.uk-box-shadow-hover-xlarge Добавьте этот класс, чтобы применить очень большую тень от блока при наведении на него курсором.
<div class="uk-box-shadow-hover-small"></div>

Примеры с наведением

  • Hover Small
    Hover XLarge
    Small + Hover Large
    XLarge + Hover Medium
  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
        <div>
            <div class="uk-box-shadow-hover-small uk-padding">Hover Small</div>
        </div>
        <div>
            <div class="uk-box-shadow-hover-xlarge uk-padding">Hover XLarge</div>
        </div>
        <div>
            <div class="uk-box-shadow-small uk-box-shadow-hover-large uk-padding">Small + Hover Large</div>
        </div>
        <div>
            <div class="uk-box-shadow-xlarge uk-box-shadow-hover-medium uk-padding">XLarge + Hover Medium</div>
        </div>
    </div>

Плюшка «Drop cap»

С помощью класса .uk-dropcap вы можете создать прикольную буквицу внутри текста, добавив ее непосредственно к элементу <p>.

  • Таким образом, семантический разбор внешних противодействий является качественно новой ступенью переосмысления внешнеэкономических буковок. Банальные, но неопровержимые выводы, а также элементы буквенного процесса формируют глобальный интерактивный инструмент, и при этом - призваны к ответу. Лишь расположение крупнейших генераторов смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности.

  • <p class="uk-dropcap">Таким образом, семантический разбор внешних противодействий является качественно новой ступенью переосмысления внешнеэкономических буковок. Банальные, но неопровержимые выводы, а также элементы буквенного процесса формируют глобальный интерактивный инструмент, и при этом - призваны к ответу. Лишь расположение крупнейших генераторов смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности.</p>

С классом .uk-logo вы можете легко определить свой логотип, например, установив логотип в панели навигации Navbar.

<a class="uk-logo" href=""></a>

Пример

Добавьте класс .uk-light из компонента Инверсия при отображении лого на темном фоне, чтобы его цвет автоматически инвертировался для лучшей видимости.

  • <div class="uk-panel uk-padding uk-background-secondary uk-light">
        <a class="uk-logo" href="#">Лого</a>
    </div>

Логотип картинкой

В качестве логотипа вы также можете использовать элемент <img>, например с SVG.

<a class="uk-logo" href="">
    <img src="" alt="">
</a>

Вы можете автоматически отображать альтернативные логотипы для светлого и темного фона с помощью компонента Inverse. Просто нужно добавить класс .uk-logo-inverse ко второму изображению логотипа.

В зависимости от цветового режима, когда применяется класс .uk-light или .uk-dark к родительскому элементу, будет отображаться инвертированный логотип.

Разметка

<div class="uk-light">
    <a class="uk-logo" href="">
        <img src="" alt="">
        <img class="uk-logo-inverse" src="" alt="">
    </a>
</div>

Примеры. Отображение в зависимости от цветового режима

  • <div class="uk-child-width-expand@s" uk-grid>
        <div>
            <div class="uk-panel uk-padding uk-background-muted">
                <a class="uk-logo" href="#">
                    <img src="/demo/img/logo-placeholder.svg" alt="">
                    <img class="uk-logo-inverse" src="/demo/img/logo-placeholder-light.svg" alt="">
                </a>
            </div>
        </div>
        <div>
            <div class="uk-panel uk-padding uk-background-secondary uk-light">
                <a class="uk-logo" href="#">
                    <img src="/demo/img/logo-placeholder.svg" alt="">
                    <img class="uk-logo-inverse" src="/demo/img/logo-placeholder-light.svg" alt="">
                </a>
            </div>
        </div>
    </div>
Примечание Чтобы добавить SVG логотип для сайта как встроенный SVG, используйте компонент SVG.

Режимы наложения : «Blend mode»

Определяет режим наложения (смешивания) исходного цвета на фоновый цвет или фоновое изображение. С помощью режимов наложения объекты смешиваются друг с другом.

Добавьте один из следующих классов, чтобы применить различные режимы наложения к фону, например, при размещении их на изображениях. Вы можете комбинировать их с компонентом Overlay. Чтобы лучше понять, как работают фоновые режимы смешивания, вы можете ознакомиться с этой статьей CSS Tricks (англ.).

Классы "режимов смешивания" цветов выбранного элемента с низлежащими слоями:

Класс Описание
.uk-blend-multiply Этот класс устанавливает эффект режима смешивания «Умножение».
.uk-blend-screen Этот класс устанавливает эффект режима смешивания «Осветление».
.uk-blend-overlay Этот класс устанавливает эффект режима смешивания «Перекрытие».
.uk-blend-darken Этот класс устанавливает режим смешивания «Замена тёмным».
.uk-blend-lighten Этот класс устанавливает режим смешивания «Замена светлым».
.uk-blend-color-dodge Этот класс устанавливает режим смешивания «Осветление основы».
.uk-blend-color-burn Этот класс устанавливает режим смешивания «Затемнение основы».
.uk-blend-hard-light Этот класс устанавливает режим смешивания «Направленный свет».
.uk-blend-soft-light Этот класс устанавливает режим смешивания «Рассеянный свет».
.uk-blend-difference Этот класс устанавливает эффект режима наложения «Разница».
.uk-blend-exclusion Этот класс устанавливает эффект режима наложения «Исключение».
.uk-blend-hue Этот класс устанавливает эффект режима наложения «Тон».
.uk-blend-saturation Этот класс устанавливает эффект режима наложения «Насыщенность».
.uk-blend-color Этот класс устанавливает эффект режима наложения «Цвет».
.uk-blend-luminosity Этот класс устанавливает эффект режима наложения «Яркость».
<div class="uk-position-relative">
    <div class="uk-blend-multiply uk-overlay uk-overlay-primary"></div>
    <img src="" alt="">
</div>

Примеры

  • Blend Multiply

    Multiply

    Blend Screen

    Screen

    Blend Overlay

    Overlay

    Blend Darken

    Darken

    Blend Lighten

    Lighten

    Blend Color Dodge

    Color Dodge

    Blend Color Burn

    Color Burn

    Blend Hard Light

    Hard Light

    Blend Soft Light

    Soft Light

    Blend Difference

    Difference

    Blend Exclusion

    Exclusion

    Blend Hue

    Hue

    Blend Saturation

    Saturation

    Blend Color

    Color

    Blend Luminosity

    Luminosity

  • <div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-small uk-light" uk-grid>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-multiply" src="/demo/img/dark.jpg" alt="Blend Multiply">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Multiply</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-screen" src="/demo/img/dark.jpg" alt="Blend Screen">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Screen</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-overlay" src="/demo/img/dark.jpg" alt="Blend Overlay">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Overlay</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-darken" src="/demo/img/dark.jpg" alt="Blend Darken">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Darken</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-lighten" src="/demo/img/dark.jpg" alt="Blend Lighten">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Lighten</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-color-dodge" src="/demo/img/dark.jpg" alt="Blend Color Dodge">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Color Dodge</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-color-burn" src="/demo/img/dark.jpg" alt="Blend Color Burn">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Color Burn</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-hard-light" src="/demo/img/dark.jpg" alt="Blend Hard Light">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Hard Light</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-soft-light" src="/demo/img/dark.jpg" alt="Blend Soft Light">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Soft Light</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-difference" src="/demo/img/dark.jpg" alt="Blend Difference">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Difference</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-exclusion" src="/demo/img/dark.jpg" alt="Blend Exclusion">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Exclusion</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-hue" src="/demo/img/dark.jpg" alt="Blend Hue">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Hue</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-saturation" src="/demo/img/dark.jpg" alt="Blend Saturation">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Saturation</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-color" src="/demo/img/dark.jpg" alt="Blend Color">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Color</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-luminosity" src="/demo/img/dark.jpg" alt="Blend Luminosity">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Luminosity</p>
                </div>
            </div>
        </div>
    </div>

Центр трансформации : Transform center

Точка трансформации в самом центре. Чтобы центрировать элемент "в себе", добавьте класс uk-transform-center. Это особенно полезно при абсолютном позиционировании.

  • <div class="uk-inline">
        <img src="/demo/img/light.jpg" alt="">
        <a class="uk-position-absolute uk-transform-center" style="left: 50%; top: 50%" href="#transform-origin" uk-tooltip="title: Крутяк! Нажмешь?" uk-scroll="offset: 80" uk-marker></a>
    </div>

Координаты точки : Точка трансформации

Устанавливайте координаты точки, относительно которой будет происходить трансформация элемента. Чтобы изменить источник анимации, например масштабирование, добавьте один из классов uk-transform-origin-*. Это можно комбинировать вместе с компонентом Animation.

Класс Описание
.uk-transform-origin-top-left Переход происходит сверху слева.
.uk-transform-origin-top-center Переход происходит сверху.
.uk-transform-origin-top-right Переход происходит сверху справа.
.uk-transform-origin-center-left Переход происходит слева.
.uk-transform-origin-center-right Переход происходит справа.
.uk-transform-origin-bottom-left Переход происходит внизу слева.
.uk-transform-origin-bottom-center Переход происходит снизу.
.uk-transform-origin-bottom-right Переход происходит снизу справа.
<div class="uk-transform-origin-bottom-right uk-animation-scale-up"></div>

Примеры. Появление с разных сторон

  • Bottom Right

    Top Center

    Bottom Center

  • <div class="uk-child-width-1-3@m" uk-grid>
        <div class="uk-animation-toggle" tabindex="0">
            <div class="uk-transform-origin-bottom-right uk-card uk-card-default uk-card-body uk-animation-scale-up">
                <p class="uk-text-center">Bottom Right</p>
            </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
            <div class="uk-transform-origin-top-center uk-card uk-card-default uk-card-body uk-animation-scale-up">
                <p class="uk-text-center">Top Center</p>
            </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
            <div class="uk-transform-origin-bottom-center uk-card uk-card-default uk-card-body uk-animation-scale-up">
                <p class="uk-text-center">Bottom Center</p>
            </div>
        </div>
    </div>

Отключение элемента : Disabled

Чтобы отключить поведение клика любому элементу, например <a>, <button> или <iframe>, добавьте к нему класс .uk-disabled.


Курсор «Перемещение» : Плюшка «Drag»

Чтобы применить курсор перемещения к перетаскиваемым элементам, добавьте класс .uk-drag.

<div class="uk-drag"></div>
  • <div class="uk-drag uk-width-small uk-padding uk-background-muted uk-text-center">
        <i uk-icon="icon: move; ratio: 2"></i>
    </div>

Чтобы создать тень для блока загрузочной области добавьте класс .uk-dragover.

Документация
Компоненты