3.6 Советы при проектировании

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

Работа со сложными страницами с большим количеством элементов

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

  • Используйте панель "Выбор элементов"/"Element Picker" в верхней панели. Все элементы страницы перечислены в алфавитном порядке. Вы можете начать набирать название, чтобы увидеть подходящие элементы. Когда вы наведете курсор на запись в выпадающем меню, вы увидите эскиз, чтобы подтвердить, что это нужный элемент. Клик по нему покажет и выберет элемент. Также откроется "Редактор свойств"/"Property Editor" для редактирования этого элемента. Чтобы наилучшим образом пользоваться этой функцией, вы должны привыкнуть точно именовать свои элементы.

  • Кликнув по иконке глаза вы перейдете в режим Рентгена, который сделает элементы полупрозрачными, что удобно сочетается в операцией CMD+клик, которая описана выше.

  • Пользуйтесь Деревом элементов, чтобы ясно видеть структуру вашей страницы.

  • Панель поиска удобна для того, чтобы на текущей странице найти элементы по типу, по определенному тексту и т.д.

  • Если вы обнаружили, что двигаете элемент, который никогда не должен двигаться, вы можете добавить в этот элемент защиту, отметив в Редакторе поле "Заблокировать этот элемент (не перетаскивается в редакторе)"/"Lock this element (not draggable in editor)". Это работает только в режиме редактирования и полезно при работе со сложными страницами.

Инспектор элементов

При создании сложной страницы элемент может использоваться в разных местах, таких как события, действия и даже другие элементы. Чтобы помочь вам увидеть общую картину того, как элемент задействован в интерфейсе, у Bubble есть "Инспектор элементов"/"Element Inspector", который покажет вам эти связи. В частности, он покажет:

  • "Пользовательские состояния"/"Custom States" (!!!ЛНК!!!), заданные для данного элемента, с возможностью изменять их, удалять и создавать новые.

  • Различные события, в которых используется текущий элемент

  • Различные действия с участием текущего элемента

  • Другие элементы страницы, которые ссылаются на текущий элемент

Выравнивания

Выровненные элементы - ключ к хорошему, четкому дизайну. У Баббл есть несколько инструментов, чтобы вам с этим помочь.

  1. "Привязка к краям при перетаскивании и изменении размеров элементов"/"Snap to edges when dragging and resizing element". По умолчанию, Bubble пытается привязать элемент к одной из строк на странице. Если вы хотите это изменить и привязать элемент к сетке, вы можете это сделать в меню "Сетка"/"Grid" на верхней панели.

  2. Вы можете отобразить сетку, управлять её частотой (в пикселях) и цветом линий.

  3. Меню "Упорядочить"/"Arrange" предлагает некоторые полезные функции распределения, например, если вы хотите, чтобы промежутки между тремя элементами были равными. Также вы можете центрировать элемент относительно родительского (также для этого есть горячие клавиши CTRL+E).

Контекстное меню

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

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

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

Образцы цветов

Last updated