Компонент Высота Height
Устанавливайте высоту элементов в зависимости от области просмотра или примените высоту другого элемента. Руководство. Применение.
Компонент UIkit 3 Высота предлагает три варианта установки высоты:
- использование вспомогательных классов с фиксированной высотой,
- высота в зависимости от области просмотра,
- путем соответствия высоты различных элементов.
Применение
UIkit 3 предоставляет ряд вспомогательных полезных классов для изменения высоты элемента.
Класс | Описание |
---|---|
.uk-height-1-1 |
Этот класс применяет высоту 100%. Работает, только если родительский элемент имеет заданную высоту. |
.uk-height-small |
Этот класс применяет высоту 150px. |
.uk-height-max-small |
А этот установит максимальную высоту 150px. |
.uk-height-medium |
Этот класс применяет высоту 300px. |
.uk-height-max-medium |
А этот установит максимальную высоту 300px. |
.uk-height-large |
Этот класс применяет высоту 450px. |
.uk-height-max-large |
А этот установит максимальную высоту 450px. |
<div class="uk-height-small"></div>
- SmallMediumLarge
-
<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>
Высота «Viewport»
Высота области просмотра (Вьюпорт)
Добавьте атрибут uk-height-viewport
, чтобы создать контейнер, который заполняет всю высоту видимого окна. Вы можете изменить «поведение» высоты, добавив в атрибут опцию offset-top
, offset-bottom
или expand
. Узнать больше
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
offset-top |
Boolean | false |
Вычитает верхнее смещение элемента из его высоты. |
offset-bottom |
Boolean, Number, Pixel, CSS Selector | 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="offset-bottom: 50px"></div> <!-- вычитает высоту снизу в пикселях -->
<div uk-height-viewport="expand: true"></div>
<div uk-height-viewport="min-height: 300"></div>
Вы можете просмотреть примеры в тестах для Height Viewport и Height Expand.
Высота «Match»
Чтобы растянуть все дочерние элементы контейнера до одинаковой высоты независимо от их содержимого, например, в сетке, добавьте атрибут uk-height-match
. Вы можете изменить поведение соответствия высоты, установив для атрибута опцию target
или row
. Узнать больше.
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
target |
String | > * |
Элементы, которые должны соответствовать. |
row |
Boolean | true |
По умолчанию будут соответствовать только элементы в одной строке. Например, когда столбцы сетки расширяются до ширины 100%, их высоты больше не будут совпадать. Это имеет смысл, например, если они располагаются вертикально в более узких окнах просмотра. |
<div uk-height-match>
<div></div>
<div></div>
</div>
target
является Primary опцией.
Если target
это единственный параметр в значении атрибута, то её ключ можно не использовать.
<span uk-height-match=".my-class"></span>
Высота «Match cards»
Высота : Соответствие цели
Вы также можете нацеливать и сопоставлять определенные элементы внутри контейнера, например Карты.
Просто добавьте опцию target: SELECTOR
к атрибуту.
<div uk-grid uk-height-match="target: SELECTOR">...</div>
- Заметив, что закуска была готова, полицеймейстер предложил гостям окончить вист после завтрака, и все пошли в ту комнату.Скоро все угомонилисьОни встретились взглядом и чутьем поняли друг друга.Таким образом
-
<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">Заметив, что закуска была готова, полицеймейстер предложил гостям окончить вист после завтрака, и все пошли в ту комнату.</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Скоро все угомонились</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Они встретились взглядом и чутьем поняли друг друга.</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Таким образом</div> </div> </div>
Высота «Match all»
Одинаковая высота всех ячеек
Если ваша сетка состоит из нескольких строк, сопоставляются только столбцы сетки в одной строке. Чтобы сопоставить столбцы сетки во всех строках, просто добавьте к атрибуту параметр row: false
.
<div uk-grid uk-height-match="row: false">...</div>
- В это время из дамских благовонных уст к нему устремилось множество намеков и вопросов, проникнутых насквозь тонкостию и любезностию.Видно, так уж бывает на свете.Каждая дама дала себе внутренний обет быть как можно очаровательней.По крайней мере.
-
<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">В это время из дамских благовонных уст к нему устремилось множество намеков и вопросов, проникнутых насквозь тонкостию и любезностию.</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Видно, так уж бывает на свете.</div> </div> <div class="uk-grid-margin uk-first-column"> <div class="uk-card uk-card-default uk-card-body">Каждая дама дала себе внутренний обет быть как можно очаровательней.</div> </div> <div class="uk-grid-margin"> <div class="uk-card uk-card-default uk-card-body">По крайней мере.</div> </div> </div>
Параметры для атрибута
В таблице ниже перечислены доступные настройки атрибута uk-height-match
.
Узнать больше
Опции компонента
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
target |
CSS selector | > * |
Элементы, которые должны соответствовать. По умолчанию прямые дети будут соответствовать. |
row |
Boolean | true |
Если ваши цели переносятся в несколько строк, соответствуют только столбцы сетки в пределах одной строки. |
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.heightMatch(element, options);