Flex дизайнер¶
ℹ️ Не поддерживается в новом конструкторе порталов. Используйте старый редактор порталов
Портальная страница состоит из основного (родительского) контейнера, в котором могут размещаться вложенные (дочерние) контейнеры и виджеты.
Для редактирования портальной страницы нужно выбрать ее в выпадающем меню (1) перейти в режим редактирования (2):
После этого вместо прежнего меню отображается меню редактирования портальной страницы:
| Кнопка | Действие |
|---|---|
| Отмена редактирования | Выход из режима редактирования без сохранения. |
| Без рамок / Обычный просмотр | Переключатель между режимами отображения блоков на портале. |
Разделы¶
Слева отображается список разделов. Разделы используются для более удобной организации виджетов — распределения их по темам и т.п. Для создания, удаления и переименования разделов используется контекстное меню. Создать раздел можно также с помощью кнопки.
ℹ️ Понятие "Раздел" в применении к виджетам введено в "Первой Форме" начиная в версии 2.210. При переходе на эту версию автоматически создается список разделов, аналогичный списку настроенных в системе порталов. После этого администраторы могут менять этот список.
Работа с контейнерами¶
Для создания структуры портальной страницы в основной контейнер помещаются вложенные дочерние контейнеры. Поддерживается иерархия контейнеров — любой контейнер может выступать в роли родительского, т.е. в него могут быть вложены свои дочерние контейнеры (дочерние контейнеры считаются элементами по отношению к родительскому). Перемещение контейнеров осуществляется по принципу drag-and-drop, т.е. путем перетаскивания мышью.
Каждый контейнер имеет свой набор настроек, которые описывают его поведение и поведение элементов внутри этого контейнера — выравнивание, растягивание и т.п. Если виджеты внутри контейнера должны вести себя по-разному (например, один виджет должен растягиваться, а другой нет), то для них нужно создать и настроить разные контейнеры. Если же виджеты должны вести себя одинаково и находиться рядом, то их следует помещать в один общий контейнер, это упростит настройку портальной страницы.
Для работы с контейнером используется контекстное меню, которое вызывается правой кнопкой мыши:
| Пункт меню | Действие |
|---|---|
| Удалить | Удалить контейнер со всем содержимым. |
| Добавить контейнер | Добавить новый контейнер. |
| Настройка | Открыть параметры настройки контейнера (см. ниже). |
Настройка контейнера¶
Параметры настройки контейнера:
| Параметр | На что действует | Описание |
|---|---|---|
| Flex-direction | На контейнер | Определяет направление элементов: row (по умолчанию, слева направо), row-reverse (справа налево), column (сверху вниз), column-reverse (снизу вверх). Чтобы контейнер начинался с новой строки — Flex-direction = column. |
| Justify-content | На контейнер | Определяет выравнивание относительно главной оси. Значения: flex-start (по умолчанию), flex-end, center, space-between, space-around. |
| Align-items | На контейнер | Определяет расположение flex-элементов относительно поперечной оси. Значения: flex-start, flex-end, center, baseline, stretch (по умолчанию). |
| Flex-wrap | На контейнер | Определяет однострочность/многострочность контейнера. Значения: nowrap (по умолчанию), wrap, wrap-reverse. |
| Align-content | На контейнер | Выравнивает строки при наличии свободного места на поперечной оси (не работает с однострочным контейнером). Значения: flex-start, flex-end, center, space-between, space-around, stretch (по умолчанию). |
| Align-self | На элементы в контейнере | Переопределяет для отдельных элементов выравнивание из Align-items. Значения: auto, flex-start, flex-end, center, baseline, stretch. |
| Order | На элементы в контейнере | Управляет порядком расположения элементов. Значение: целое число. |
| Flex-grow | На элементы в контейнере | Определяет возможность элемента "вырастать". Целое неотрицательное число (по умолчанию 0). Если у всех элементов значение 1 — равный размер; значение 2 — в два раза больше места. |
| Flex-shrink | На элементы в контейнере | Определяет возможность элемента сжиматься. Целое неотрицательное число (по умолчанию 0). |
| Flex-basis | На элементы в контейнере | Определяет размер по умолчанию до распределения пространства. Целое положительное число или auto (по умолчанию), в px или %. |
| Min width | На контейнер | Минимальная ширина контейнера. Указывается в px или %. Если элемент меньше указанного размера — появляется полоса прокрутки. |
| Min height | На контейнер | Минимальная высота контейнера. Указывается в px или %. |
| Max width | На контейнер | Максимальная ширина контейнера. Указывается в px или %. |
| Max height | На контейнер | Максимальная высота контейнера. Указывается в px или %. |
Добавление виджета на портальную страницу¶
Виджеты помещаются либо в основной контейнер, либо в дочерние (вложенные в родительский). Вы можете создавать новые виджеты или использовать готовые, настроенные ранее.
Чтобы получить доступ к готовым виджетам, надо раскрыть список блоков портала, щелкнув левой кнопкой мыши на стрелку справа от названия портала в левой части экрана (1). Чтобы добавить блок на портальную страницу, надо нажать на иконку "+" справа от названия блока (2). При добавлении блок автоматически помещается в создаваемый для него пустой контейнер, затем его нужно перетащить мышью в нужный контейнер (3).
При наведении курсора мыши на контейнер всплывает подсказка с ID виджета:
ℹ️ Конструктор портальных страниц не поддерживает виджет кнопок и виджет статистики. Вместо виджета кнопок следует использовать виджет меню.
Видеоурок, иллюстрирующий работу с Flex дизайнером: !
Flex дизайнер (6:38 мин.) Полезные ссылки