Документация UIkit 3 на русском

Главная
Высота

Определяйте высоту элементов в зависимости от области просмотра или сопоставляйте высоту различных элементов.

Компонент высоты UIkit предлагает три варианта установки высоты: универсальные классы, высота вьюпорта и JS-сопоставление высоты элементов.

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

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

Класс	Описание
`.uk-height-1-1`	Этот класс применяет высоту 100%. Это работает, только если родительский элемент имеет заданную высоту.
`.uk-height-small` `.uk-height-max-small`	Эти классы применяют высоту или максимальную высоту 150px.
`.uk-height-medium` `.uk-height-max-medium`	Эти классы применяют высоту или максимальную высоту 300px.
`.uk-height-large` `.uk-height-max-large`	Эти классы применяют высоту или максимальную высоту 450px.

<div class="uk-height-small"></div>

Small

Medium

Large

<div class="uk-child-width-1-3@s" uk-grid>
    <div>
        <div class="uk-height-small uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">Small</div>
    </div>
    <div>
        <div class="uk-height-medium uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">Medium</div>
    </div>
    <div>
        <div class="uk-height-large uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">Large</div>
    </div>
</div>

Высота вьюпорта (области просмотра)

Добавьте атрибут uk-height-viewport, чтобы создать контейнер, который заполняет высоту всего окна просмотра. Вы можете изменить поведение высоты, добавив опции offset-top, offset-bottom или expand к атрибуту. подробнее о конфигурации

Опция	Значение	По умолчанию	Описание
`offset-top`	Boolean	`false`	Вычитает верхнее смещение элемента от его высоты.
`offset-bottom`	Boolean, Number, Pixel	`false`	Вычитает высоту (true) следующего элемента в процентах (Число), значение в пикселях (px), исходя из собственной высоты элемента или высоты отдельного элемента.
`expand`	Boolean	`true`	Увеличивает высоту элемента, чтобы страница заполняла область просмотра.
`min-height`	Number	`0`	Устанавливает минимальную высоту. Полезно, если все дочерние элементы абсолютно позиционированы.

<div uk-height-viewport></div>

<div uk-height-viewport="offset-top: true"></div>

<div uk-height-viewport="offset-bottom: 20"></div>

<div uk-height-viewport="expand: true"></div>

<div uk-height-viewport="min-height: 300"></div>

Примеры вариантов высоты вьюпорта можно посмотреть в разделе тестов тут и тут.

Сопоставление высоты

Можно задать всем дочерним элементам контейнера одинаковую высоту вне зависимости от их содержимого, например внутри сетки. Добавьте атрибут uk-height-match. Вы можете изменить поведение соответствия высоты, установив опции target или row в атрибут. Подробнее

Опция	Значение	По умолчанию	Описание
`target`	String	`> *`	Задать одинаковую высоту всем элементам с указанным селектором.
`row`	Boolean	`true`	По умолчанию будут сопоставляться только элементы в одной строке. Например, когда столбцы сетки расширяются до 100%, их высоты больше не будут совпадать. Это имеет смысл, например, если они располагаются вертикально в более узких окнах просмотра.

<div uk-height-match>
    <div></div>
    <div></div>
</div>

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

<span uk-height-match=".my-class"></span>

Сопоставление карточек

Вы также можете нацеливать и сопоставлять определенные элементы внутри контейнера, например, карточки. Добавьте опцию target: SELECTOR В атрибут.

<div uk-grid uk-height-match="target: SELECTOR">...</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum

<div class="uk-child-width-1-2@s" uk-grid uk-height-match="target: > div > .uk-card">
    <div>
        <div class="uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Lorem Ipsum</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Lorem Ipsum</div>
    </div>
</div>

Сопоставление всего

Если ваша сетка состоит из нескольких строк, сопоставляются только столбцы сетки в одной строке. Чтобы сопоставить столбцы сетки во всех строках, просто добавьте опцию row: false в атрибут.

<div uk-grid uk-height-match="row: false">...</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum

<div class="uk-child-width-1-2@s" uk-grid uk-height-match="target: > div > .uk-card; row: false">
    <div class="uk-first-column">
        <div class="uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Lorem Ipsum</div>
    </div>
    <div class="uk-grid-margin uk-first-column">
        <div class="uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    <div class="uk-grid-margin">
        <div class="uk-card uk-card-default uk-card-body">Lorem Ipsum</div>
    </div>
</div>

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

В таблице ниже перечислены доступные настройки атрибута uk-height-match. Подробнее о настройках

Опция	Значение	По умолчанию	Описание
`target`	CSS selector	`> *`	Элементы, которые должны соответствовать. По умолчанию это все дочерние элементы.
`row`	Boolean	`true`	Если ваши цели переносятся в несколько строк, сопоставляются только столбцы сетки в пределах одной строки.

JavaScript

Подробнее о компонентах JavaScript.

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

UIkit.heightMatch(element, options);

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

Высота

Уважаемые пользователи!