81bf188f5f
Single-letter tool keys (R, O, L, F, S, P, H), Escape, Enter, Space (and locale equivalents), arrow key names in shortcut tables and prose. Remove <kbd> from non-key words like 'drag'.
90 lines
7.4 KiB
Markdown
90 lines
7.4 KiB
Markdown
---
|
||
title: Слои и страницы
|
||
description: Управление слоями, страницами и панелью свойств в OpenPencil.
|
||
---
|
||
|
||
# Слои и страницы
|
||
|
||
Интерфейс редактора состоит из трёх основных панелей: слои (слева), холст (по центру) и свойства (справа). Все панели можно изменять по размеру, перетаскивая разделители.
|
||
|
||
## Панель слоёв
|
||
|
||
Панель слоёв слева отображает иерархию документа в виде дерева.
|
||
|
||
### Древовидное отображение
|
||
|
||
Узлы отображаются в сворачиваемом дереве. Нажмите на стрелку рядом с фреймом, группой или компонентом, чтобы развернуть или свернуть дочерние элементы.
|
||
|
||
### Перетаскивание для изменения порядка
|
||
|
||
Перетаскивайте слои для изменения их порядка. Это меняет z-порядок узла в графе сцены — узлы выше в списке отображаются поверх остальных.
|
||
|
||
### Переключение видимости
|
||
|
||
Нажмите значок глаза рядом с любым слоем, чтобы скрыть или показать его на холсте. Скрытые узлы остаются в дереве.
|
||
|
||
### Переименование
|
||
|
||
Дважды кликните по имени слоя, чтобы переименовать его встроенным редактированием. Нажмите <kbd>Enter</kbd> или кликните в другом месте для подтверждения, <kbd>Escape</kbd> — для отмены.
|
||
|
||
### Синхронизация выделения
|
||
|
||
Клик по слою в панели выделяет соответствующий узел на холсте, и наоборот.
|
||
|
||
## Панель страниц
|
||
|
||
Панель страниц показывает все страницы документа.
|
||
|
||
- **Переключение страницы** — кликните по вкладке страницы, чтобы сделать её активной. Холст переключается на эту страницу и восстанавливает её позицию просмотра.
|
||
- **Добавить страницу** — нажмите кнопку добавления для создания новой страницы
|
||
- **Удалить страницу** — удаляет текущую страницу
|
||
- **Переименовать страницу** — дважды кликните по имени страницы для встроенного редактирования. Нажатие <kbd>Enter</kbd> или <kbd>Escape</kbd>, или клик в другом месте подтверждает переименование.
|
||
|
||
У каждой страницы свой холст и состояние области просмотра.
|
||
|
||
## Панель свойств
|
||
|
||
Панель свойств справа имеет три вкладки:
|
||
|
||
### Вкладка «Дизайн»
|
||
|
||
Показывает свойства выделенных узлов, организованные в разделы:
|
||
|
||
- **Внешний вид** — прозрачность, скругление углов (с переключателем независимых углов), видимость
|
||
- **Заливка** — сплошной цвет, градиенты (линейный, радиальный, угловой, ромбовидный), заливка изображением, привязка переменных
|
||
- **Обводка** — цвет, толщина, окончания, соединения, штриховой шаблон
|
||
- **Эффекты** — тень, внутренняя тень, размытие слоя, размытие фона, размытие переднего плана
|
||
- **Типографика** — семейство шрифта, размер, начертание, кнопки форматирования B/I/U/S (отображаются для текстовых узлов)
|
||
- **Раскладка** — элементы управления [авто-раскладкой](./auto-layout) (отображаются для фреймов с авто-раскладкой)
|
||
- **Экспорт** — масштаб, формат и кнопка экспорта (см. [Экспорт](./exporting))
|
||
|
||
Когда узлы не выделены, вкладка «Дизайн» показывает свойства уровня страницы, включая цвет фона холста.
|
||
|
||
### Вкладка «Код»
|
||
|
||
Отображает выделенный узел в виде кода с подсветкой синтаксиса, нумерацией строк и кнопкой копирования. Переключатель формата позволяет выбрать один из двух режимов вывода:
|
||
|
||
- **OpenPencil JSX** — дерево компонентов, совместимое с `renderJsx()` для программного двустороннего преобразования
|
||
- **Tailwind CSS v4** — HTML с утилитарными классами (`<div className="flex gap-4 p-3">`) для вставки в проекты React/Vue
|
||
|
||
### Вкладка «ИИ»
|
||
|
||
Интерфейс ИИ-чата (также переключается через <kbd>⌘</kbd><kbd>J</kbd>), который может создавать и изменять элементы дизайна на естественном языке. Поддерживает несколько моделей ИИ через OpenRouter.
|
||
|
||
## Сочетания клавиш
|
||
|
||
| Действие | Mac | Windows / Linux |
|
||
|----------|-----|-----------------|
|
||
| Переключить ИИ-чат | <kbd>⌘</kbd><kbd>J</kbd> | <kbd>Ctrl</kbd> + <kbd>J</kbd> |
|
||
|
||
## Мобильная раскладка
|
||
|
||
На мобильных устройствах и маленьких экранах боковые панели заменяются выдвижной нижней панелью с жестом свайпа. Вкладки в верхней части панели переключают между представлениями «Слои», «Свойства», «Дизайн» и «Код». Панель инструментов сжимается в компактную горизонтальную полосу с переключением категорий.
|
||
|
||
## Советы
|
||
|
||
- Ширина панелей сохраняется автоматически — она сохраняется между перезагрузками.
|
||
- Используйте панель слоёв для поиска перекрывающихся узлов, по которым сложно кликнуть на холсте.
|
||
- [Контекстное меню](./context-menu) предоставляет дополнительные действия для выделенных узлов.
|
||
- См. [Выделение и манипуляции](./selection-and-manipulation) для сочетаний клавиш z-порядка (]/[) и переключения видимости/блокировки.
|