Верхняя панель
Строка Верхней панели располагается над всеми остальными панелями Редактора дизайна и содержит элементы управления проектом.
Видео: Верхняя панель
https://vk.com/video-219751701_456239132
Левая часть Верхней панели
В левой части Верхней панели находятся:
- Опция перехода к Панели управления (Go to dashboard) или к Настройкам проекта (Project settings). Меню открывается по клику на логотипе Taptop. Подробнее — Панель управления и Настройки проекта.
- Кнопка переименования проекта (Rename). По клику на текущее название проекта можно задать ему новое название.
- Опции переключения в Режим клиента (Client mode), Режим дизайнера (Design mode) или Режим предварительного просмотра (Preview).
Центральная часть Верхней панели
В центре Верхней панели находятся:
- Кнопка создания компонента (Create component). Позволяет создать компонент из элемента или группы элементов для последующего использования в проекте. Подробнее о компонентах — Компоненты.
- Опция масштаба (Zoom). Позволяет изменять масштаб отображения холста. Можно выбрать значение из предложенного списка или ввести свое значение в пределах от 25% до 200%.
-
Опция ширины холста (Canvas width).
Можно ввести свое значение или выбрать из предложенного списка следующие параметры экранов:
- 1920px (Full HD)
- 1440px (Laptop extra large)
- 1366px (Laptop large)
- 1280px (Laptop small)
- 1024px (iPad Pro)
- 768px (iPad)
- 414px (iPhone 6/7/8 Plus)
- 375px (iPhone X)
- 320px (iPhone 5/SE)
-
Опция Breakpoints. Позволяет установить размеры экрана, при которых будут меняться стили элементов. Это дает возможность сделать несколько вариантов отображения сайта, обеспечив таким образом его адаптивность для различных устройств. Подробнее — Адаптация под разные устройства.
Доступны следующие Breakpoints:
- Компьютер — Базовый breakpoint (Desktop — Base breakpoint)
- Планшет — 991px и меньше (Tablet — 991px and down)
- Мобильный телефон горизонтальный режим — 767px и меньше (Mobile landscape — 767px and down)
- Мобильный телефон портретный режим — 478px и меньше (Mobile portrait — 478px and down)
Нажав кнопку Добавить большие брейкпоинты, можно также добавить дополнительные брейкпоинты:
- 1280px и больше (1280px and up)
- 1440px и больше (1440px and up)
- 1920px и больше (1920px and up)
Правая часть Верхней панели
В правой части Верхней панели находятся:
- Кнопки Отменить (Undo) и Повторить (Redo).
-
Статус сохранения изменений (Сhanges saved/Unsaved changes). Показывает, сохранены или не сохранены последние изменения.
-
Кнопка экспорт кода. Позволяет скопировать код текущей страницы для экспорта.
- Кнопка публикации проекта (Publish project). Позволяет опубликовать проект в Интернете с предложенным адресом домена или выбрать для публикации свой домен.
При нажатии кнопки публикации проекта открывается всплывающее окно, в котором отображается статус опубликованных изменений. Чтобы все необходимые страницы сайта были опубликованы, нужно нажать кнопку Опубликовать (Publish) рядом с каждой страницей в списке неопубликованных изменений (Unpublished changes). При нажатии кнопки происходит переключение на соответствующую страницу.