Добавление элементов на Angular страницу

В продвинутом дизайнере интерфейсов страницы раздела формируются из Angular компонентов, таких как поля ввода, визуальные и интерактивные элементы.

Меню доступных Angular компонентов отображается на панели элементов продвинутого дизайнера. По умолчанию вы можете добавить на страницу следующие элементы:

• Поля ввода;
• Элементы действия: «Кнопка»;
• Визуальные элементы: «Изображение», «Слайдер», «Текст», «Ссылка».

Примечание. Настройка параметров визуальных элементов и элементов действия выполняется аналогичным образом, как и для преднастроенных модулей Angular.

Для того чтобы добавить элемент на страницу в продвинутом дизайнере, выполните следующие шаги:

1. Откройте раздел, страницу которого необходимо настроить.
2. Перейдите в мастер раздела по команде  «Настройка вида» → «Открыть мастер раздела». Подробнее о включении продвинутого дизайнера смотрите в статье Настройка раздела в продвинутом дизайнере интерфейсов.
3. В блоке «Страницы раздела» выберите в списке страницу и нажмите  → «Редактировать». Подробнее о создании Angular страниц раздела смотрите в статье Создание страниц в продвинутом дизайнере интерфейсов.
4. На панели элементов выберите элемент и переместите его в рабочую область страницы.

Рисунок 1 — Добавление элемента на Angular страницу

5. Для настройки нажмите кнопку  или  в контекстном меню элемента. На открывшейся панели укажите значения параметров элемента. Набор параметров зависит от выбранного элемента.
6. Аналогичным образом добавьте и настройте другие необходимые элементы на странице. Подробнее о том, как настроить размер элемента, смотрите в разделе Настройка размера элемента.

Примечание. Обратите внимание, что на страницу необходимо добавить все обязательные колонки объекта.

7. Нажмите «Сохранить страницу». В случае ошибки отобразится сообщение, и в рабочей области соответствующие колонки выделятся красной рамкой. Перейдите к элементу с ошибкой, чтобы скорректировать настройки.

Рисунок 2 — Ошибки при сохранении настроек Angular страницы

Редактирование элемента

Для редактирования элемента наведите курсор на блок элемента и в контекстном меню нажмите кнопку . Откроется панель с параметрами элемента.

Рисунок 3 — Контекстное меню элемента

Удаление элемента

Для удаления элемента наведите курсор на блок элемента и в контекстном меню нажмите кнопку . В результате элемент будет удален из рабочей области дизайнера.

Примечание. Обратите внимание, что при удалении поля соответствующая колонка объекта не удаляется. Удаление колонки из объекта возможно только с помощью раздела «Управление конфигурацией».

Настройка размера элемента

Чтобы изменить размеры элемента (ширину или высоту), наведите курсор на его границу, зажмите и перетащите край блока до нужного размера. Значения параметров «Ширина» и «Высота» изменятся автоматически. Подробнее: Панель элементов продвинутого дизайнера

Рисунок 4 — Изменение размеров элемента

Также вы можете вручную установить размеры в параметрах:

• Ширина — при добавлении элемента на страницу устанавливается значение по умолчанию «Авто». Чтобы изменить ширину, введите новое значение в процентах. Допустимый диапазон — от 5 до 100. Возможно указывать дробные числа с кратностью 0.5. Если введено значение, не кратное 0.5, оно автоматически округлится до ближайшего кратного числа. Чтобы вернуть значение по умолчанию, нажмите в поле «%» → «Авто». В результате блок элемента растянется на максимально допустимую ширину страницы;
• Высота — при добавлении элемента на страницу устанавливается значение по умолчанию «56». Чтобы изменить высоту, введите новое значение в пикселях. Допустимый диапазон — от 40 до 20000. Возможно указание только целых чисел, при вводе дробного числа оно автоматически округлится до целого.

Рисунок 5 — Параметры элемента «Ширина» и «Высота»

Рекомендуем изучить

Начало работы с продвинутым дизайнером интерфейсов
Настройка раздела в продвинутом дизайнере интерфейсов
Продвинутый дизайнер интерфейсов
Создание страниц в продвинутом дизайнере интерфейсов