Компонент Margin
Коллекция служебных классов UIkit для добавления отступов между элементами.
Как использовать компонент Margin в UIkit 3. Изучаем отступы.
Создатели UIkit 3 решили избавить разработчиков от головной боли, связанной с формированием отступов элементов в сетке. Теперь margin проставляется автоматически!
Добавьте один или несколько из следующих классов к любому элементу, чтобы создать тот же вертикальный и / или горизонтальный отступ, который обычно имеет абзац.
| Класс | Описание |
|---|---|
.uk-margin |
Добавляет верхний отступ, если ему предшествует другой элемент, и всегда добавляет нижний margin. |
.uk-margin-top |
Добавляет верхний отступ. |
.uk-margin-bottom |
Добавляет нижний отступ. |
.uk-margin-left |
Добавляет левый отступ. |
.uk-margin-right |
Добавляет правый отступ. |
<div class="uk-margin"></div>
- Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы выНе переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы
<div class="uk-margin uk-card uk-card-default uk-card-body">Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы</div> <div class="uk-margin uk-card uk-card-default uk-card-body">Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы</div>
Маленький отступ
Добавьте один или несколько классов, чтобы уменьшить отступы.
| Класс | Описание |
|---|---|
.uk-margin-small |
Добавляет небольшой верхний отступ, если элементу предшествует другой элемент, и всегда — нижний. |
.uk-margin-small-top |
Добавляет маленький отступ сверху. |
.uk-margin-small-bottom |
Добавляет маленький отступ снизу. |
.uk-margin-small-left |
Добавляет маленький отступ слева. |
.uk-margin-small-right |
Добавляет маленький отступ справа. |
- Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы выНе переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы
<div class="uk-margin-small uk-card uk-card-default uk-card-body">Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы</div> <div class="uk-margin-small uk-card uk-card-default uk-card-body">Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы</div>
Средний отступ
Добавьте один из следующих классов, чтобы добавить средний отступ.
| Класс | Описание |
|---|---|
.uk-margin-medium |
Добавляет верхний отступ, если ему предшествует другой элемент, и всегда добавляет нижний margin. |
.uk-margin-medium-top |
Добавляет средний отступ сверху. |
.uk-margin-medium-bottom |
Добавляет средний отступ снизу. |
.uk-margin-medium-left |
Добавляет средний отступ слве. |
.uk-margin-medium-right |
Добавляет средний отступ справа. |
- Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы выНе переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы
<div class="uk-margin-medium uk-card uk-card-default uk-card-body">Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы</div> <div class="uk-margin-medium uk-card uk-card-default uk-card-body">Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы</div>
Большой отступ
Добавьте один из следующих классов, чтобы добавить большой отступ между элементами.
| Класс | Описание |
|---|---|
.uk-margin-large |
Добавляет верхний отступ, если ему предшествует другой элемент, и всегда добавляет нижний. |
.uk-margin-large-top |
Добавляет больщой отступ сверху. |
.uk-margin-large-bottom |
Добавляет большой отступ снизу. |
.uk-margin-large-left |
Добавляет большой отступ слева. |
.uk-margin-large-right |
Добавляет большой отступ справа. |
- Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы выНе переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы
<div class="uk-margin-large uk-card uk-card-default uk-card-body">Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы</div> <div class="uk-margin-large uk-card uk-card-default uk-card-body">Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы</div>
Очень большой отступ
Добавьте один из следующих классов, чтобы добавить очень большой отступ между элементами
| Класс | Описание |
|---|---|
.uk-margin-xlarge |
Добавляет огромный верхний отступ, если ему предшествует другой элемент, и всегда добавляет нижний. |
.uk-margin-xlarge-top |
Добавляет огромный отступ сверху. |
.uk-margin-xlarge-bottom |
Добавляет огромный отступ снизу. |
.uk-margin-xlarge-left |
Добавляет огромный отступ слева. |
.uk-margin-xlarge-right |
Добавляет огромный отступ справа. |
- Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы выНе переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы
<div class="uk-margin-xlarge uk-card uk-card-default uk-card-body">Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы</div> <div class="uk-margin-xlarge uk-card uk-card-default uk-card-body">Не переживайте, если что-то идёт не так. Если бы работало абсолютно всё, не работали бы вы</div>
Удаление отступов
Добавьте один из следующих классов, чтобы удалить отступы.
| Класс | Описание |
|---|---|
.uk-margin-remove |
Удаляет все отступы. |
.uk-margin-remove-top |
Удаляет верхний отступ. |
.uk-margin-remove-bottom |
Удаляет нижний отступ. |
.uk-margin-remove-left |
Удаляет нижний отступ. |
.uk-margin-remove-right |
Удаляет правый отступ. |
.uk-margin-remove-vertical |
Удаляет отступы сверху и снизу. |
.uk-margin-remove-adjacent |
Удаляет верхний отступ следующего элемента. |
<h1 class="uk-margin-remove"></h1>
Автоматический отступ
Добавьте один из следующих классов, чтобы установить отступы автоматически. Это полезно для центрирования или иного выравнивания блочных элементов с фиксированной шириной, а также flex элементов.
| Класс | Описание |
|---|---|
.uk-margin-auto |
Устанавливает для левого и правого края значение auto, горизонтально центрирует блочные и flex элементы. |
.uk-margin-auto-top |
Устанавливает верхний отступ на авто, сдвигая блоки и flex элементы вниз. |
.uk-margin-auto-bottom |
Устанавливает нижний отступ на авто, сдвигая блоки и flex элементы вверх. |
.uk-margin-auto-left |
Устанавливает левый отступ на авто, сдвигая блоки и flex элементы вправо. |
.uk-margin-auto-right |
Устанавливает правый отступ на авто, сдвигая блоки и flex элементы влево. |
.uk-margin-auto-vertical |
Устанавливает верхнее и нижнее поле автоматически, центрируя по вертикали только flex элементы. |
- Блочный элементFlex элемент
<div class="uk-margin uk-margin-auto-left uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Блочный элемент</div> <div class="uk-flex uk-height-medium uk-background-muted uk-margin uk-text-center"> <div class="uk-margin-auto uk-margin-auto-vertical uk-width-1-2@s uk-card uk-card-default uk-card-body">Flex элемент</div> </div>
Динамическое обертывание
Чтобы добавить интервал к элементам набора, например, встроенным элементам, которые переносятся на адаптиве, задайте атрибут uk-margin
родительскому элементу. В результате автоматически будет проставлен класс .uk-margin-small-top элементам, которые перенеслись на следующую строку.
<div uk-margin>
<button></button>
<button></button>
</div>
<div uk-margin> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> </div>
Опции компонента
Любой из этих параметров может быть применен к атрибуту компонента. Разделяйте несколько вариантов точкой с запятой. Подробнее о синтаксисе
| Опция | Значение | По умолчанию | Описание |
|---|---|---|---|
margin |
String | uk-margin-small-top | Этот класс добавляется к элементам, которые переносятся на следующую строку. После переноса элементу добавляется margin отделения от предыдущей строки. |
first-column |
String | uk-first-column | Этот класс добавляется к первому элементу в каждой строке. |
JavaScript
Подробнее о компонентах JavaScript.
Инициализация
UIkit.margin(element, options);