Платформа 3V/Формы/Компоненты/Верстка/Контейнер: различия между версиями
< Платформа 3V | Формы | Компоненты | Верстка
Перейти к навигации
Перейти к поиску
O.ivanov (обсуждение | вклад) |
O.ivanov (обсуждение | вклад) |
||
| Строка 54: | Строка 54: | ||
| || "stretch" || Растянуть | | || "stretch" || Растянуть | ||
|- | |- | ||
| − | | || string || | + | | alignContent || string || Выравнивание по поперечной оси (при наличии свободного пространств) |
|- | |- | ||
| − | | || "" || | + | | || "start" || С начала |
|- | |- | ||
| − | | || "" || | + | | || "end" || С конца |
|- | |- | ||
| − | | || "" || | + | | || "center" || По центру |
|- | |- | ||
| − | | || "" || | + | | || "between" || Растянуть |
|- | |- | ||
| − | | || "" || | + | | || "around" || Равномерно |
| − | |||
|- | |- | ||
| − | | || "" || | + | | || "stretch" || Равномерно (с отступами) |
|- | |- | ||
| − | | || | + | | w100 || boolean || На всю ширину |
|- | |- | ||
| − | | || | + | | h100 || boolean || На всю высоту |
|- | |- | ||
| − | | || | + | | gap || string || Отступы |
| − | |||
| − | |||
|} | |} | ||
== Пример == | == Пример == | ||
| Строка 84: | Строка 81: | ||
"templateOptions": { | "templateOptions": { | ||
"direction": "row", | "direction": "row", | ||
| + | "wrap": "nowrap", | ||
| + | "justifyContent": "start", | ||
| + | "alignItems": "start", | ||
| + | "alignContent": "start", | ||
| + | "w100": true, | ||
| + | "h100": true, | ||
| + | "gap": "10px", | ||
} | } | ||
} | } | ||
</pre> | </pre> | ||
[https://3v.3v-group.net/navigator/#/home?objectId=67449 Пример формы] | [https://3v.3v-group.net/navigator/#/home?objectId=67449 Пример формы] | ||
Версия 15:59, 26 июля 2021
Код компонента: bs-flex
Описание: Выводит флекс контейнер
Свойства:
| Код | Тип | Описание |
|---|---|---|
| type | string | Тип компонента |
| templateOptions | ||
| direction | string | Направление элементов |
| "row" | Слева направо → | |
| "row-reverse" | Справа налево ← | |
| "column" | Сверху вниз ↓ | |
| "column-reverse" | Снизу вверх ↑ | |
| wrap | string | Правило переноса |
| "nowrap" | В одну линию | |
| "wrap" | В несколько линий | |
| "wrap-reverse" | В несколько линий (инверсия) | |
| justifyContent | string | Выравнивание по главной оси |
| "start" | С начала | |
| "end" | С конца | |
| "center" | По центру | |
| "between" | Равномерно | |
| "around" | Равномерно (с отступами) | |
| alignItems | string | Выравнивание по поперечной оси |
| "start" | С начала | |
| "end" | С конца | |
| "center" | По центру | |
| "baseline" | По центу (baseline) | |
| "stretch" | Растянуть | |
| alignContent | string | Выравнивание по поперечной оси (при наличии свободного пространств) |
| "start" | С начала | |
| "end" | С конца | |
| "center" | По центру | |
| "between" | Растянуть | |
| "around" | Равномерно | |
| "stretch" | Равномерно (с отступами) | |
| w100 | boolean | На всю ширину |
| h100 | boolean | На всю высоту |
| gap | string | Отступы |
Пример
JSON
{
"type": "bs-flex",
"templateOptions": {
"direction": "row",
"wrap": "nowrap",
"justifyContent": "start",
"alignItems": "start",
"alignContent": "start",
"w100": true,
"h100": true,
"gap": "10px",
}
}