Платформа 3V/Формы/Компоненты/Верстка/Контейнер: различия между версиями

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
Строка 1: Строка 1:
−
'''Код компонента:''' <code>bs-flex</code>  
+
{{DISPLAYTITLE:Контейнер}}
 +
'''Контейнер''' - основной элемент разметки. </br>
 +
__TOC__
 +
<br>
 +
<div class="NavFrame collapsed" style="width:900px;">
 +
  <div class="NavHead"> Описание настроек компонента</div>
 +
  <div class="NavContent"> </br>
  
−
'''Описание:''' Выводит флекс контейнер - представляет собой способ компоновки элементов, в основе лежит идея оси.
+
{| class="wikitable" style="clear:both;"
−
 
+
! Название в конструкторе !! Название в JSON !! Допустимый тип !! Что это
−
'''Свойства:'''
+
|-
−
{| class="wikitable"
+
| Описание для шаблона || templateDescription || string || Наименования настроенного шаблона компонента. Не отображается на форме.
 +
|-
 +
| Наименование || name || string || Заголовок контейнера. Нужен для визуальной навигации между контейнерами. Не отображается на форме.
 +
|-
 +
| Направление элементов || direction || row, row-reverse, column, column-reverse || Задание направления расположения элементов внутри контейнера
 +
|-
 +
| Правило переноса || wrap || nowrap, wrap, wrap-reverse || Задание правила вывода элементов.
 +
|-
 +
| Выравнивание по главной оси || justifyContent|| start, end, center, between, around || Выравнивание по направлению, выбранному в поле "направление элементов"
 +
|-
 +
| Выравнивание по поперечной оси|| alignItems|| start, end, center, baseline, stretch || Выравнивание по перпендикулярной направляющей оси
 +
|-
 +
| Отображение "переполненного" блока || overflow|| visible, hidden, scroll, auto || Задание поведения при невозможности полностью отобразить информацию в контейнере.
 +
|-
 +
| Отступы || gap || string || Отступы между элементам по направляющей оси. Задается в пикселях.
 +
|-
 +
| Отображать|| visible || bool || Флаг, при включении которого контейнер отображается на форме.
 +
|-
 +
! Дополнительная настройка
 +
|-
 +
| Ширина ||  width || bool || Ширина контейнера по умолчанию. Задается в пикселях или процентах.
 +
|-
 +
| Максимальная ширина || max-width || int || Максимально возможная ширина контейнера.  Задается в пикселях или процентах.
 +
|-
 +
| Минимальная ширина ||  min-width || bool || Минимально возможная ширина контейнера.  Задается в пикселях или процентах.
 +
|-
 +
| Высота ||  height || шаблон || Высота контейнера по умолчанию. Задается в пикселях или процентах.
 +
|-
 +
| Максимальная высота || max-height || шаблон || Максимально возможная высота контейнера.  Задается в пикселях или процентах.
 +
|-
 +
| Минимальная высота ||  min-height || шаблон || Минимально возможная высота контейнера.  Задается в пикселях или процентах.
 
|-
 
|-
−
! Код !! Тип !! Описание
+
| Отступы ||  margin || шаблон || Отступы вокруг контейнера. Задается в пикселях.
 
|-
 
|-
−
| type || string || Тип компонента
+
| Поля || padding || шаблон || Отступы между элементам по перпендикулярной направляющей оси. Задается в пикселях.
 
|-
 
|-
−
!colspan="3"| templateOptions
+
| Фон ||  background || шаблон || Фон контейнера. Задается в HTML.
 
|-
 
|-
−
| direction || string || Направление элементов
+
| Граница || border || шаблон || Задание границы контейнера. Задается в HTML.
 
|-
 
|-
−
| || "row" || Слева направо →
+
| Скругление границ || border-radius|| шаблон || Радиус скругления углов контейнера. Задается в пикселях.
 
|-
 
|-
−
| || "row-reverse" || Справа налево ←
+
| Тень || box-shadow|| шаблон || Задание тени вокруг контейнера. Задается в HTML.
 
|-
 
|-
−
| || "column" || Сверху вниз ↓
+
| CSS классы для компонента || className || шаблон || Создание действий на компонент.
 
|-
 
|-
−
| || "column-reverse" || Снизу вверх ↑
+
| CSS классы для группы || fieldGroupClassName || шаблон || Создание действий на компонент.
 
|-
 
|-
−
| wrap || string || Правило переноса
+
|}
 +
</br>
 +
</div></div>
 +
== Настроить разметку ==
 +
=== Добавить контейнеры ===
 +
Контейнер можно добавить через конструктор во вкладке "Разметка"<br>
 +
[[Файл:Разметка. Выпад.список.png]] <br clear="both" /><br>
 +
 
 +
=== Добавить вложенные контейнеры ===
 +
Для того, чтобы настроить расположение элементов на области всей формы нужно использовать вложенные контейнеры.  Для того, чтобы создать вложенный контейнер, нужно в родительском контейнере создать новый или перенести ещё существующий.
 +
 
 +
=== Задать направление ===
 +
Существует 4 вида направлений.
 +
 
 +
{| class="wikitable" style="margin:auto; clear:both;"
 +
! Название в конструкторе !! Название в JSON !! Главная ось!! Описание
 
|-
 
|-
−
| || "nowrap" || В одну линию
+
| Слева направо ⟶ || row || Строка || Элементы внутри располагаются слева направо.
 
|-
 
|-
−
| || "wrap" || В несколько линий
+
| Справа налево ⟵ || row-reverse || Строка || Элементы внутри располагаются справа налево.
 
|-
 
|-
−
| || "wrap-reverse" || В несколько линий (инверсия)
+
| Снизу вверх ↓  || column || Столбец || Элементы внутри располагаются сверху вниз.
 
|-
 
|-
−
| justifyContent|| string || Выравнивание по главной оси
+
| Сверху вниз ↑ || column-reverse || Столбец || Элементы внутри располагаются снизу вверх.
 +
|}
 +
 
 +
Благодаря вложенности и заданию направлений контейнеров настраивается разметка для всей формы.
 +
[[Файл:Контейнер.png]] <br clear="both" /><br>
 +
 
 +
== Настроить расположение элементов внутри контейнеров ==
 +
 
 +
=== Настроить выравнивание ===
 +
При настройке направления задаётся главная ось, а перпендикулярная ей становится поперечной.
 +
Выравнивание по главной оси может быть следующим
 +
 
 +
{| class="wikitable" clear:both;"
 +
|+Выравнивание по главной оси
 
|-
 
|-
−
| || "start" || С начала
+
! Название в конструкторе !! Название в JSON !! Описание
 
|-
 
|-
−
| || "end" || С конца
+
| С начала || start || Элементы располагаются начала заданного направления
 
|-
 
|-
−
| || "center" || По центру
+
| С конца || end || Элементы располагаются с конца заданного направления
 
|-
 
|-
−
| || "between" || Равномерно
+
| По центру || center || Элементы выравниваются по центру заданного направления
 
|-
 
|-
−
| || "around" || Равномерно (с отступами)
+
| Равномерно || between || Элементы располагаются равномерно по заданному направлению. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.
 
|-
 
|-
−
| alignItems || string || Выравнивание по поперечной оси
+
| Равномерно (с отступами) || around || Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.
 +
|}
 +
 
 +
Выравнивание по попереченой оси может быть следующим:
 +
 
 +
{| class="wikitable" clear:both;"
 +
|+Выравнивание по поперечной оси
 
|-
 
|-
−
| || "start" || С начала
+
! Название в конструкторе !! Название в JSON !! Описание
 
|-
 
|-
−
| || "end" || С конца
+
| С начала || start || Элементы располагаются начала поперечного направления
 
|-
 
|-
−
| || "center" || По центру
+
| С конца || end || Элементы располагаются с конца поперечного направления
 
|-
 
|-
−
| || "baseline" || По центу (baseline)
+
| По центру || center || Элементы выравниваются по центру поперечного направления
 
|-
 
|-
−
| || "stretch" || Растянуть
+
| По центру(растянуть) || between || Элементы располагаются равномерно по поперечному направлению.  Интервал между каждой парой соседних элементов одинаков
 
|-
 
|-
−
| alignContent || string || Выравнивание по поперечной оси (при наличии свободного пространств)
+
| Растянуть || stretch || Элементы становятся одного размера по поперечному направлению
 +
|}
 +
 
 +
 
 +
=== Настроить поведение в переполненном блоке ===
 +
При добавлении динамической информации или при изменении размера окна может произойти ситуация, когда контейнер не сможет её в себя вместить. Для решения таких ситуаций требуется настроить поведение контейнера.
 +
Задать правило переноса для блоков:
 +
 
 +
{| class="wikitable" clear:both;"
 +
|+Правило переноса
 
|-
 
|-
−
| || "start" || С начала
+
! Название в конструкторе !! Название в JSON !! Описание
 
|-
 
|-
−
| || "end" || С конца
+
| В одну линию || nowrap || Блоки располагаются по направлению в одну линию без переноса. Контейнер становится переполненным.
 
|-
 
|-
−
| || "center" || По центру
+
| В несколько линий || wrap || Расположение в несколько линий. Блоки внутри контейнера, начиная с последнего по заданному направлению, переносятся на параллельную линию по заданному направлению. Требуется отдельная настройка выравнивания по поперечной оси.
 
|-
 
|-
−
| || "between" || Растянуть
+
| В несколько линий(инверсия) || wrap-reverse || Расположение в несколько линий. Блоки внутри контейнера, начиная с последнего по заданному направлению, переносятся на параллельную линию против заданного направления. Требуется отдельная настройка выравнивания по поперечной оси.
 +
|}
 +
 
 +
Отображение переполненного блока настраивается в поле в соответсвующем поле настройки.
 +
 
 +
{| class="wikitable" clear:both;"
 +
|+Отображение "переполненого" блока
 
|-
 
|-
−
| || "around" || Равномерно
+
! Название в конструкторе !! Название в JSON !! Описание
 
|-
 
|-
−
| || "stretch" || Равномерно (с отступами)
+
| Отображать || visible || Элементы отображаются не смотря на сжатие контейнера. Могут выходить за рамки контейнера
 
|-
 
|-
−
| w100 || boolean || На всю ширину
+
| Скрыть || hidden || Элементы обрезается, без предоставления прокрутки
 
|-
 
|-
−
| h100 || boolean || На всю высоту
+
| Полоса прокрутки || scroll || Содержимое обрезается и браузер использует элементы прокрутки.
 
|-
 
|-
−
| gap || string || Отступы
+
| Автоматически || auto || Зависит от браузера. Например, браузер Firefox предоставляют прокрутку, если содержимое переполняет блок.
 
|}
 
|}
−
== Пример ==
 
−
'''JSON'''
 
−
<pre>
 
−
{
 
−
  "type": "bs-flex",
 
−
  "templateOptions": {
 
−
        "direction": "row",
 
−
        "wrap": "nowrap",
 
−
        "justifyContent": "start",
 
−
        "alignItems": "start",
 
−
        "alignContent": "start",
 
−
        "w100": true,
 
−
        "h100": true,
 
−
        "gap": "10px",
 
−
  }
 
−
}
 
−
</pre>
 
−
[https://3v.3v-group.net/navigator/#/home?objectId=67449 Пример со свойствами флекс контейнера]
 
  
−
[https://3v.3v-group.net/navigator/#/home?objectId=69347 Пример размещения макета]
+
=== Настроить отступы ===
 +
Чтобы настроить отступы по направляющей оси следует задать их в поле настройки "Отступы" на главной вкладке настроек [[Файл:настройка контейнера.png]]. Чтобы настроить отступы по поперечной оси, нужно задать его в поле настройки "Поля" в поле настройки стили [[Файл:стили контейнер.png|мини]].
 +
 
 +
== Стилизовать контейнер ==
 +
 
 +
=== Настроить размер контейнера ===
 +
Ширину и высоту контейнера можно задать с помощью вкладки настройки стилей [[Файл:стили контейнер.png|мини]]. Также есть возможность задать минимальную и максимальную высоту и ширину.
 +
 
 +
=== Настроить отступы вокруг контейнера ===
 +
Для того, чтобы настроить внешние отступы контейнера следует задать их в поле "Отступы" во вкладке основной настройки контейнера [[Файл:настройка контейнера.png]].
 +
Настройка может быть задана с использованием одного, двух, трёх или четырёх значений. Задается в пикселях и процентах.
 +
*Когда определено одно значение, такое значение определено для всех четырёх сторон.
 +
*Когда определены два значения, то первое значение определяет внешний отступ для верхней и нижней стороны, а второе значение определяет отступ для левой и правой стороны.
 +
*Когда определены три значение, то первое значение определяет внешний отступ для верхней стороны, второе значение определяет внешний отступ для левой и правой стороны, а третье значение определяет отступ для нижней стороны.
 +
*Когда определены четыре значения, они определяют внешние отступы для верхней стороны, справа, снизу и слева в рассмотренном порядке (по часовой стрелке).
 +
 
 +
Если в родительском контейнере настроены отступы между полей, то они складываются с отступами вокруг контейнера.
 +
 
 +
=== Настроить оформление ===
 +
Для того. чтобы задать цвет заливки контейнера, нужно задать цвет в HTML-формате в поле настройки "Фон" на вкладке стили.  
 +
 
 +
=== Настроить границу ===
 +
Для того, чтобы задать настройки границы в поле "Грани"Дополнительно можно прочитать [http://htmlbook.ru/css/border здесь]
 +
===  ===

Версия 10:03, 12 ноября 2021

Контейнер - основной элемент разметки.


Настроить разметку

Добавить контейнеры

Контейнер можно добавить через конструктор во вкладке "Разметка"
Разметка. Выпад.список.png

Добавить вложенные контейнеры

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

Задать направление

Существует 4 вида направлений.

Название в конструкторе Название в JSON Главная ось Описание
Слева направо ⟶ row Строка Элементы внутри располагаются слева направо.
Справа налево ⟵ row-reverse Строка Элементы внутри располагаются справа налево.
Снизу вверх ↓ column Столбец Элементы внутри располагаются сверху вниз.
Сверху вниз ↑ column-reverse Столбец Элементы внутри располагаются снизу вверх.

Благодаря вложенности и заданию направлений контейнеров настраивается разметка для всей формы. Контейнер.png

Настроить расположение элементов внутри контейнеров

Настроить выравнивание

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

Выравнивание по главной оси
Название в конструкторе Название в JSON Описание
С начала start Элементы располагаются начала заданного направления
С конца end Элементы располагаются с конца заданного направления
По центру center Элементы выравниваются по центру заданного направления
Равномерно between Элементы располагаются равномерно по заданному направлению. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.
Равномерно (с отступами) around Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.

Выравнивание по попереченой оси может быть следующим:

Выравнивание по поперечной оси
Название в конструкторе Название в JSON Описание
С начала start Элементы располагаются начала поперечного направления
С конца end Элементы располагаются с конца поперечного направления
По центру center Элементы выравниваются по центру поперечного направления
По центру(растянуть) between Элементы располагаются равномерно по поперечному направлению. Интервал между каждой парой соседних элементов одинаков
Растянуть stretch Элементы становятся одного размера по поперечному направлению


Настроить поведение в переполненном блоке

При добавлении динамической информации или при изменении размера окна может произойти ситуация, когда контейнер не сможет её в себя вместить. Для решения таких ситуаций требуется настроить поведение контейнера. Задать правило переноса для блоков:

Правило переноса
Название в конструкторе Название в JSON Описание
В одну линию nowrap Блоки располагаются по направлению в одну линию без переноса. Контейнер становится переполненным.
В несколько линий wrap Расположение в несколько линий. Блоки внутри контейнера, начиная с последнего по заданному направлению, переносятся на параллельную линию по заданному направлению. Требуется отдельная настройка выравнивания по поперечной оси.
В несколько линий(инверсия) wrap-reverse Расположение в несколько линий. Блоки внутри контейнера, начиная с последнего по заданному направлению, переносятся на параллельную линию против заданного направления. Требуется отдельная настройка выравнивания по поперечной оси.

Отображение переполненного блока настраивается в поле в соответсвующем поле настройки.

Отображение "переполненого" блока
Название в конструкторе Название в JSON Описание
Отображать visible Элементы отображаются не смотря на сжатие контейнера. Могут выходить за рамки контейнера
Скрыть hidden Элементы обрезается, без предоставления прокрутки
Полоса прокрутки scroll Содержимое обрезается и браузер использует элементы прокрутки.
Автоматически auto Зависит от браузера. Например, браузер Firefox предоставляют прокрутку, если содержимое переполняет блок.

Настроить отступы

Чтобы настроить отступы по направляющей оси следует задать их в поле настройки "Отступы" на главной вкладке настроек настройка контейнера.png. Чтобы настроить отступы по поперечной оси, нужно задать его в поле настройки "Поля" в поле настройки стили

стили контейнер.png

.

Стилизовать контейнер

Настроить размер контейнера

Ширину и высоту контейнера можно задать с помощью вкладки настройки стилей

стили контейнер.png

. Также есть возможность задать минимальную и максимальную высоту и ширину.

Настроить отступы вокруг контейнера

Для того, чтобы настроить внешние отступы контейнера следует задать их в поле "Отступы" во вкладке основной настройки контейнера настройка контейнера.png. Настройка может быть задана с использованием одного, двух, трёх или четырёх значений. Задается в пикселях и процентах.

  • Когда определено одно значение, такое значение определено для всех четырёх сторон.
  • Когда определены два значения, то первое значение определяет внешний отступ для верхней и нижней стороны, а второе значение определяет отступ для левой и правой стороны.
  • Когда определены три значение, то первое значение определяет внешний отступ для верхней стороны, второе значение определяет внешний отступ для левой и правой стороны, а третье значение определяет отступ для нижней стороны.
  • Когда определены четыре значения, они определяют внешние отступы для верхней стороны, справа, снизу и слева в рассмотренном порядке (по часовой стрелке).

Если в родительском контейнере настроены отступы между полей, то они складываются с отступами вокруг контейнера.

Настроить оформление

Для того. чтобы задать цвет заливки контейнера, нужно задать цвет в HTML-формате в поле настройки "Фон" на вкладке стили.

Настроить границу

Для того, чтобы задать настройки границы в поле "Грани"Дополнительно можно прочитать здесь

Источник — https://wiki.3v-group.net/index.php?title=Платформа_3V/Формы/Компоненты/Верстка/Контейнер&oldid=5033