Утилиты

Коллекция полезных служебных классов для стилизации контента.

Панели

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

Добавьте класс .uk-panel к элементу<div> для создания контекста позиции, установки box-sizing на border-box, применения clearfix и удаления нижнего отступа его последнего дочернего элемента.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="uk-child-width-1-3@s" uk-grid>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
</div>

Скроллируемая панель

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

  • <div class="uk-panel uk-panel-scrollable">
    <ul class="uk-list">
        <li><label><input class="uk-checkbox" type="checkbox"> Category 1</label></li>
        <li>
            <label><input class="uk-checkbox" type="checkbox"> Category 2</label>
            <ul>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.1</label></li>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.2</label></li>
                <li>
                    <label><input class="uk-checkbox" type="checkbox"> Category 2.3</label>
                    <ul>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.1</label></li>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.2</label></li>
                    </ul>
                </li>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.4</label></li>
            </ul>
        </li>
        <li><label><input class="uk-checkbox" type="checkbox"> Category 3</label></li>
        <li><label><input class="uk-checkbox" type="checkbox"> Category 4</label></li>
    </ul>

</div>

Очищение потока и обтекание

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

Класс Описание
.uk-float-left Добавьте этот класс, чтобы включить обтекание слева.
.uk-float-right Добавьте этот класс, чтобы включить обтекание справа.
.uk-clearfix Добавьте этот класс к родительскому блоку, чтобы очистить поток.

В качестве альтернативы вы можете создать новый контекст формата блока, например, добавив класс .uk-overflow-hidden. |

  • Справа
    Слева
  • <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>

Переполнение контейнера

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

Класс Описание
.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, чтобы увеличить высоту элемента, чтобы он заполнил оставшуюся высоту родительского контейнера. Он добавляет вертикальную полосу прокрутки, если ее содержимое превышает высоту.

  • Контент перед переполнением контейнера.

    Контент после переполнениея контейнера.

  • <div class="uk-height-medium">
    <div class="js-wrapper">

        <p>Контент перед переполнением контейнера.</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="images/light.jpg" alt=""></div>
                <div class="uk-width-1-2"><img src="images/dark.jpg" alt=""></div>
                <div class="uk-width-1-2"><img src="images/photo.jpg" alt=""></div>
                <div class="uk-width-1-2"><img src="images/photo2.jpg" alt=""></div>
            </div>
        </div>

        <p>Контент после переполнениея контейнера.</p>

    </div>
</div>

Это часто используется в Модальных окнах.

<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>Open</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">Headline</h2>
        </div>

        <div class="uk-modal-body" uk-overflow-auto>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </div>

    </div>
</div>

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

Опция Значение По умолчанию Описание
selContainer String .uk-modal CSS-селектор для элемента контейнера, который задает высоту.
selContent String .uk-modal-dialog CSS-селектор для элемента, который оборачивает внутреннее содержимое, чтобы задать его высоту.

Изменение размеров окна

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

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

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

  •             
<!-- Resize vertically -->
<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>
            
        
                
<!-- Resize horizontally and vertically -->
<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>
&lt;!-- Resize vertically --&gt;
&lt;div uk-grid&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-child-width-1-2" uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
    <div>
        <pre class="uk-resize">
            <code>
&lt;!-- Resize horizontally and vertically --&gt;
&lt;div uk-grid&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-child-width-1-2" uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
</div>

Свойство Display

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

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

Встроенный элемент

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

Класс Описание
.uk-inline Добавьте этот класс для применения поведения встроенного блока к элементу, добавьте max-width 100% и создайте контекст позиции.
.uk-inline-clip Аналогичен .uk-inline, и он также обрезает переполненные дочерние элементы. 
<div class="uk-inline">
    <img alt="">
    <div class="uk-position-cover"></div>
</div>
  • Наложение
  • <div class="uk-inline">
    <img src="images/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> адаптируются к ширине родительского контейнера по умолчанию. Чтобы применить отзывчивое поведение к iframes, добавьте атрибут uk-responsive. Для других элементов или для применения другого поведения, просто добавьте один из следующих классов.

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

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

Скругление рамок

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

Класс Описание
.uk-border-rounded Добавьте этот класс, чтобы применить закругленные углы.
.uk-border-circle Добавьте этот класс, чтобы применить форму круга.
.uk-border-pill Добавьте этот класс, чтобы применить форму таблетки.
  • UIkit документация UIkit документация UIkit документация
  • <img class="uk-border-rounded" src="images/avatar.jpg" width="200" height="200" alt="Border rounded">
<img class="uk-border-circle" src="images/avatar.jpg" width="200" height="200" alt="Border circle">
<img class="uk-border-pill" src="images/avatar.jpg" width="200" height="200" alt="Border pill">

Тени блоков

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

Класс Описание
.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>

Тени снизу

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

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

Режим наведения

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

Класс Описание
.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>

Буквица

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

. <p>.

  • Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <p class="uk-dropcap">Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Логотип

Вместе с классом .uk-logo вы можете легко стилизовать свой логотип, например, в вашей навигационной панели.

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

  • <a class="uk-logo" href="#">Logo</a>

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

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

Изображение логотипа

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

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

Вы даже можете автоматически отображать альтернативные логотипы для светлого и темного фона, используяя компонент Инверсия. Добавьте класс .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="images/logo-placeholder.svg" alt="">
                <img class="uk-logo-inverse" src="images/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="images/logo-placeholder.svg" alt="">
                <img class="uk-logo-inverse" src="images/logo-placeholder-light.svg" alt="">
            </a>
        </div>
    </div>
</div>

Внимание Чтобы внедрить логотип SVG как встроенный SVG, используйте компонент SVG.

Режимы смешивания

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

Класс Описание
.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

    Умножение

    Blend Screen

    Экран

    Blend Overlay

    Перекрытие

    Blend Darken

    Затемнение

    Blend Lighten

    Осветление

    Blend Color Dodge

    Осветление основы

    Blend Color Burn

    Выжигание основы

    Blend Hard Light

    Жесткий свет

    Blend Soft Light

    Мягкий свет

    Blend Difference

    Вычитание

    Blend Exclusion

    Исключение

    Blend Hue

    Цветовой тон

    Blend Saturation

    Насыщенность

    Blend Color

    Цветность

    Blend 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="images/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="images/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="images/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="images/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="images/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="images/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="images/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="images/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="images/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="images/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="images/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="images/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="images/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="images/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="images/dark.jpg" alt="Blend Luminosity">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Luminosity</p>
            </div>
        </div>
    </div>
</div>

Транформация по центру

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

  • <div class="uk-inline">
    <img src="images/light.jpg" alt="">
    <a class="uk-position-absolute uk-transform-center" style="left: 50%; top: 50%" href="#" uk-marker></a>
</div>

Координаты трансформации

Чтобы изменить направление анимации, например масштабирование, добавьте один из классов семейства uk-transform-origin-*. Также легко комбинировать трансформацию с компонентом Анимация.

Класс Описание
.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 The transition originates from the bottom.
.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">
        <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">
        <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">
        <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>

Отключение

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

  • Неактивно
  • <a class="uk-disabled uk-button uk-button-default" href="#">Неактивно</a>

Перетаскивание

Чтобы применить курсор перемещения к перетаскиваемым элементам, добавьтеe класс .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.