Устройство редактора

Четыре области: полоса экранов, панель слева, холст, свойства справа.

  • Полоса экранов — все экраны приложения. Отсюда добавляют, переименовывают, дублируют и назначают стартовый. Кнопка «+» справа спрашивает, какой экран завести: пустой или из готовых; кнопка «+» слева ставит шапку или нижнее меню.
  • Панель слева — три вкладки. «Блоки» — что можно положить на экран, «Слои» — дерево того, что уже лежит, «Данные» — таблицы и память приложения.
  • Холст посередине — сам экран. Компоненты кладут перетаскиванием, текст правят двойным щелчком, правая кнопка открывает меню: дублировать, обернуть, превратить в другой компонент.
  • Свойства справа — всё про выделенный компонент, тремя вкладками: «Контент» (что написано), «Вид» (как выглядит), «Логика» (что делает при нажатии и когда показывается).
Четыре области: полоса экранов, палитра блоков, холст и свойства выбранного.
Четыре области: полоса экранов, палитра блоков, холст и свойства выбранного.

Наверху ещё две вещи, которые легко пропустить: переключатель «Холст / Карта» — карта показывает экраны и стрелки переходов между ними, — и меню «Ещё», где живут шаблоны, стили проекта, платежи, заявки, статистика, QR и эта справка.

Наверху справа выбирается размер экрана, на котором смотрят: iPhone SE, iPhone 15, Android и планшеты — iPad mini и iPad. Планшет здесь не про диагональ: с 700 точек ширины приложение раскладывается иначе — телефонной колонкой по центру, если так стоит настройка «На компьютере» в стилях проекта. Холст и превью показывают ровно это.

Обе боковые панели тянутся мышью: подведите курсор к границе панели и холста — он станет двусторонней стрелкой — и тяните. Длинные названия столбцов в «Данных» и глубокое дерево в «Слоях» помещаются целиком. Двойное нажатие по той же границе возвращает обычную ширину, а запомненная ширина своя у каждого браузера и в проект не уезжает.

Где: Не помните, где что, — нажмите ⌘K (Ctrl+K). Палитра команд ищет по всему редактору: компоненты, шаблоны, действия.

Читать дальше