Компоновки операционных панелей

Операционная панель состоит из одного или нескольких элементов, которые сделаны так, что занимают 100 процентов экрана. При создании операционной панели вы можете создать настольное и мобильное представления. Компоновка каждого представления должна быть настроена так, чтобы подходить для устройства, используемого для просмотра.

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

Компоновка представления для настольных компьютеров

Компоновка операционной панели по умолчанию оптимизирована для просмотра на настольном компьютере. Когда вы меняете размер окна браузера, размер элементов также меняется. Компоновка для настольного компьютера содержит основной текст, необязательный заголовок и дополнительную боковую панель. Основной текст содержит визуальные элементы, организованные в компоновку с закреплением окон. Заголовок может включать название, подзаголовок, значок, фоновое изображение и меню, а также может содержать переключатели. Боковая панель содержит название и описание и может содержать переключатели.

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

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

Управление компоновками

Вы можете упорядочить большую часть элементов операционной панели, перемещая их, изменяя их размер, вкладывая и группируя их. Единственные элементы, которые невозможно переместить, это заголовок, боковая панель и выдвижная панель.title В представлении операционной панели они занимают заданное для них пространство и должны быть в единственном экземпляре.

Подсказка:

В процессе работы с компоновкой время от времени сохраняйте работу. Чтобы создать копию операционной панели, щелкните стрелку рядом с Сохранить Save и выберите Сохранить как.

Перемещение элементов

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

Чтобы заново упорядочить элементы представления операционной панели, щелкните и удерживайте Перетащить элемент Drag item и переместите элемент по индикатору в нужное место. Отпустите кнопку мыши, когда текст подсказки изменится с Перетащить на новое место на текст со словами Пристыковать как, например Пристыковать как столбец.

Прикрепление элементов

Вы можете пристыковать элементы как строки или как столбцы. Элементы могут быть пристыкованы к разделам представления операционной панели или к разделам других элементов. Например, можно пристыковать элемент как столбец на правой стороне представления или пристыковать элемент как столбец на правой стороне другого элемента.

Изменение размера элементов

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

Изменение размера элемента

Вы также можете изменить размер всей строки или столбца, чтобы у элементов, содержащихся в них, был одинаковый размер. Чтобы изменить размер всей строки, нажмите на кнопку Равномерно распределить ширину Distribute width evenly рядом со строкой в дереве компоновки. Чтобы изменить размер всего столбца, нажмите на кнопку Равномерно распределить высоту Distribute height evenly рядом со столбцом в дереве компоновки.

Расположить элементы один над другим

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

Примечание:

Вложенные элементы не могут быть сгруппированы с другими.

Чтобы создать несколько вложенных элементов, щелкните Перетащить элемент Drag item и переместите его в центр целевого элемента. Отпустите кнопку мыши, когда текст изменится на Один над другим. Кроме того, вы также можете создать вид с вкладками, добавив новый элемент непосредственно поверх другого элемента.

Расположить элементы один над другим

После добавления элемента в стек создается новая вкладка. Вкладки можно переименовать, щелкнув вкладку и нажав кнопку Редактировать вкладка Редактировать. Можно изменить порядок вложенных элементов, щелкнув и перетащив вкладку.

Примечание:

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

Группировка элементов

Вы можете группировать элементы, чтобы объединить их вместе в компоновке операционной панели. В отличие от вложенных элементов, группировка элементов не будет скрывать другие элементы в группе. Группировка позволяет перемещать и изменять размер элементов так, как если бы они были одним элементом, и скрыть границы между ними.

Примечание:

Сгруппированные элементы не могут быть вложены в другие элементы или группы.

Чтобы сгруппировать два элемента, щелкните и удерживайте Перетащить элемент Drag item, и переместите его в центр целевого элемента, так же, как при размещении одного над другим. Однако, прежде чем отпустить кнопку мыши, нажмите и удерживайте клавишу Shift. При этом индикаторы положения и перемещаемый элемент будут отмечены зеленым цветом. Отпустите кнопку мыши, когда в тексте подсказки появятся слова Группировать как, например Группировать как столбец. Обязательно отпускайте кнопку мыши перед тем, как отпустить клавишу Shift.

Кроме того, вы можете нажать и удерживать клавишу Shift при добавлении элемента в операционную панель, чтобы добавить элемент в группу.

Группировка элементов

Вы также можете выбрать группу для всей строки или всего столбца целиком. Когда вы группируете всю строку или столбец, содержащиеся в них элементы автоматически группируются вместе. Чтобы сгруппировать всю строку или весь столбец, нажмите на кнопку Группировка элементов Group elements рядом со строкой или со столбцом.