Обложка

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

Как использовать Компонент Cover в UIkit 3

Чтобы изображение перекрывало его родительский элемент, добавьте класс .uk-cover-container к родительскому элементу и атрибут uk-cover к изображению.

<div class="uk-cover-container">
    <img src="" alt="" uk-cover>
</div>

Внимание Чтобы расположить содержимое поверх элемента обложки, используйте Компонент Позиционирование. Для улучшения видимости текста и элементов используйте классы .uk-light или .uk-dark из компонента Инверсия.

  • <div class="uk-cover-container uk-height-medium">
    <img src="images/dark.jpg" alt="" uk-cover>
</div>

Видео

Чтобы создать видео, которое будет обложкой контейнера, добавьте атрибут uk-cover к видео. Оберните элемент контейнера вокруг видео и добавьте класс .uk-cover-container к дочернему элементу

Компонент Cover наследует все свойства из компонента Видео включая автоотключение и автовоспроизведение. Видео будет приостановлено, когда оно не скрыто, и возобновится, как только оно снова станет видимым.

<div class="uk-cover-container">
    <video uk-cover></Видео>
</div>

  • <div class="uk-cover-container uk-height-medium">
    <video autoplay loop muted playsinline uk-cover>
        <source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
        <source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
    </video>
</div>

Iframe

Чтобы применить компонент Обложка к iframe, необходимо добавить атрибут uk-cover к тегу iframe. Затем добавьте класс .uk-cover-container класс для элемента контейнера вокруг iframe, чтобы обрезать содержимое. 

<div class="uk-cover-container">
    <iframe src="" uk-cover></iframe>
</div>

  • <div class="uk-cover-container uk-height-medium">
    <iframe src="https://www.youtube-nocookie.com/embed/YE7VzlLtp-4?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent" width="560" height="315" frameborder="0" allowfullscreen uk-cover></iframe>
</div>

Адаптивная высота

Чтобы добавить отзывчивое поведение к вашему изображению на обложке, вам нужно создать невидимый элемент <canvas> и назначить ему атрибуты width или height в соответствии с соотношением сторон. Таким образом, он адаптирует адаптивное поведение изображения.

<div class="uk-cover-container">
    <canvas width="" height=""></canvas>
    <img src="" alt="" uk-cover>
</div>

  • <div class="uk-cover-container">
    <canvas width="400" height="200"></canvas>
    <img src="images/dark.jpg" alt="" uk-cover>
</div>

Высота области просмотра

Добавьте атрибут uk-height-viewport из компонента Высота, чтобы растянуть родительский элемент на всю область просмотра.

<div class="uk-cover-container" uk-height-viewport>
    <img src="" alt="" uk-cover>
</div>

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

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

Опция Значение По умолчанию Описание
automute Boolean true Атоматически выключает видео в iframe.
width Number undefined Ширина элемента.
height Number undefined Высота элемента.

JavaScript

Подробнее об использовании JavaScript в UIkit 3.

Initialization

UIkit.cover(element, options);