Danila Poyarkov c3412a44fc

* docs: polish localized documentation

- Rewrite Russian documentation for natural terminology and current source parity\n- Continue the Polish editorial pass across guides and SDK references\n- Refresh shared localized SDK API data imports

* docs(pl): complete editorial pass

- Rewrite the remaining advanced Vue SDK references\n- Refresh the Figma compatibility matrix against the canonical source\n- Align terminology and behavior across every Polish documentation page

* docs(de): complete editorial pass

- Rewrite German guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix

* docs(es): complete editorial pass

- Rewrite Spanish guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix

* docs(fr): complete editorial pass

- Rewrite French guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix

* docs: correct localized terminology

- Replace unnecessary English prose with natural localized terminology\n- Derive documentation aliases from named directory roots\n- Preserve English only for identifiers, APIs, and exact product terms

* docs(it): continue editorial pass

- Rewrite Italian user guides and automation documentation\n- Update Vue SDK composables and component references\n- Restore current AI, export, component, and variable behavior

* docs(it): complete editorial pass

- Finish Italian advanced SDK and reference documentation\n- Refresh the Penpot comparison and Figma compatibility matrix\n- Replace literal machine translations with natural technical prose

* docs(pl): refine property panel terminology

* docs: refine remaining localized prose

- Replace overfitted English prose in Polish feature documentation\n- Rewrite the Russian property-list reference in natural terminology

* docs(ru): rewrite Penpot comparison naturally

- Replace remaining English prose with natural Russian\n- Preserve code identifiers and library names only where required

* docs: rewrite localized feature overviews naturally

- Replace avoidable English prose in German, Spanish, and French\n- Keep identifiers and product names unchanged

* docs(de): refine property panel terminology

* docs: refine Spanish and French SDK terminology

* docs(ru): continue full prose audit

- Rewrite homepage, setup, navigation, and guide index naturally\n- Restore missing zoom shortcuts

* docs(ru): audit user and automation guides

- Rewrite selection, collaboration, and automation prose naturally\n- Preserve API identifiers while localizing ordinary terminology

* docs(ru): audit CLI inspection and analysis

* docs(ru): audit Vue SDK overview and guides

* docs(ru): audit Vue SDK API prose

- Localize ordinary component and composable terminology\n- Preserve API symbols and code identifiers

* docs(ru): audit advanced and gradient API references

* docs(ru): finish advanced API prose audit

* docs(ru): audit JSX renderer guide

* docs(ru): audit CLI export and scripting guides

* docs(pl): audit Penpot comparison prose

* docs(pl): audit selection and automation guides

* docs(pl): audit homepage and variable guides

* docs(pl): audit vector, layers, and Pen guides

* docs(pl): audit Auto layout and shape guides

* docs(pl): audit context menu and export guides

* docs(pl): audit JSX and analysis guides

* docs(pl): audit AI Chat guide

* docs(pl): audit components and CLI inspection

* docs(pl): audit scripting and SDK overview prose

* docs(pl): audit SDK API indexes

* docs(pl): audit SDK component references

* docs(pl): audit SDK composable references

* docs(ru): refine usePosition terminology

* docs(pl): audit advanced SDK references

* docs(pl): audit Figma compatibility matrix

* docs(pl): finish residual SDK terminology audit

* docs(pl): finish component terminology audit

* docs(pl): finish SDK guide terminology audit

* docs(de): begin full user guide prose audit

* docs(de): audit navigation, Pen, and layers guides

* docs(de): audit Auto Layout, shapes, menu, and export

* docs(de): audit components, text, and vector guides

* docs(de): audit variables and automation overview

* docs(de): audit AI Chat and collaboration guides

* docs(de): audit CLI inspection, analysis, and export

* docs(de): audit scripting and JSX guides

* docs(de): audit Vue SDK overview and guides

* docs(de): audit SDK API indexes

* docs(de): audit SDK component references

* docs(de): audit SDK composable references

* docs(de): audit advanced SDK references

* docs(de): audit Penpot comparison prose

* docs(de): audit Figma compatibility reference

* docs(es): begin full user guide prose audit

* docs(es): audit document organization guides

* docs(es): audit editing workflow guides

* docs(es): audit automation and collaboration prose

* docs(es): audit CLI inspection and export guides

* docs(es): audit CLI scripting guide

* docs(es): audit JSX and feature overview prose

* docs(es): audit Penpot comparison prose

* docs(es): audit SDK overview and guides

* docs(es): begin SDK component reference audit

* docs(es): audit SDK navigation component references

* docs(es): audit SDK color and layout components

* docs(es): begin SDK composable reference audit

* docs(es): audit SDK property composable references

* docs(es): audit SDK editor composable references

* docs(es): begin advanced SDK reference audit

* docs(es): audit advanced SDK state references

* docs(es): complete advanced SDK reference audit

* docs(es): audit Figma compatibility reference

* docs(es): complete residual terminology sweep

* docs(fr): begin full prose second audit

* docs(fr): audit AI and variables prose

* docs(fr): audit core user guide prose

* docs(fr): audit editing workflow guides

* docs(fr): audit CLI and JSX prose

* docs(fr): audit Penpot comparison prose

* docs(fr): audit SDK overview and guides

* docs(fr): begin SDK API reference audit

* docs(fr): audit SDK navigation component references

* docs(fr): audit SDK color and layout components

* docs(fr): begin SDK composable reference audit

* docs(fr): audit SDK property composable references

* docs(fr): audit editor composables and advanced APIs

* docs(fr): audit advanced SDK state references

* docs(fr): complete advanced SDK reference audit

* docs(fr): audit Figma compatibility reference

* docs(fr): complete residual terminology sweep

* docs(it): begin full prose second audit

* docs(it): audit document workflow guides

* docs(it): audit editing and automation prose

* docs(it): audit CLI and JSX prose

* docs(it): audit Penpot comparison and SDK guides

* docs(it): begin SDK API reference audit

* docs(it): audit SDK component and state references

* docs(it): audit residual SDK references

* docs(it): audit Figma compatibility reference

* docs(it): complete residual terminology sweep

* docs(i18n): verify residual locale terminology

2026-08-20 18:36:50 +03:00

6 KiB

Raw Blame History

title	description
Автоматическая компоновка	Flexbox и CSS Grid в OpenPencil: направление, интервалы, отступы, выравнивание и размеры дочерних объектов.

Автоматическая компоновка

Автоматическая компоновка размещает дочерние объекты внутри фрейма. Доступны два режима: Flex с горизонтальным или вертикальным потоком и Grid со строками, столбцами и настраиваемыми дорожками.

Включение

Выделите фрейм и нажмите ⇧A, чтобы включить или отключить автоматическую компоновку.
Выделите несколько отдельных объектов и нажмите ⇧A, чтобы поместить их в новый фрейм.

При создании фрейма OpenPencil сначала сортирует объекты по их видимому положению.

Направление

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

Расстояния

Интервал

Интервал определяет расстояние между соседними дочерними объектами.

Внутренние отступы

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

Выравнивание

Основная ось

Начало: объекты располагаются у начала оси.
Центр: объекты выравниваются по центру.
Конец: объекты располагаются у конца оси.
Распределить: свободное место равномерно распределяется между объектами.

Поперечная ось

Начало: выравнивание по началу поперечной оси.
Центр: выравнивание по центру.
Конец: выравнивание по концу оси.
Растянуть: дочерние объекты занимают всю поперечную ось.

Размер дочерних объектов

Фиксированный: использовать явно заданную ширину или высоту.
Заполнить: занять доступное место.
По содержимому: подобрать размер по содержимому.

Первое фактическое изменение ширины или высоты переводит только эту ось из режима «Заполнить» или «По содержимому» в фиксированный режим. Простое получение фокуса полем не меняет режим размера.

Изменение порядка

Перетащите дочерний объект внутри фрейма, чтобы изменить его место среди соседних. Индикатор покажет новую позицию.

Сочетание клавиш

Действие	macOS	Windows / Linux
Включить или отключить компоновку	`⇧A`	`ShiftA`

CSS Grid

Grid размещает дочерние объекты в строках и столбцах с явно заданными размерами дорожек.

Включение Grid

Выделите фрейм с автоматической компоновкой и переключите режим Flex на Grid в разделе «Компоновка».

Размеры дорожек

fr: пропорциональная доля доступного места.
px: фиксированный размер в пикселях.
auto: размер по содержимому.

Например, 1fr 200px 1fr создаёт три столбца: фиксированный центральный и два гибких боковых.

Интервалы строк и столбцов

Горизонтальное и вертикальное расстояние между ячейками можно настраивать отдельно.

Размещение объектов

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

Экспорт в JSX и Tailwind

Grid экспортируется в JSX с классами Tailwind, например grid grid-cols-3, gap-x-4 gap-y-2 и col-start-2 row-span-2.

Советы

Вкладывайте фреймы с автоматической компоновкой друг в друга для сложных адаптивных интерфейсов.
Режим «Заполнить» во многих случаях соответствует flex-grow: 1 в CSS.
Grid подходит для панелей мониторинга, галерей, форм и других двумерных структур.

6 KiB Raw Blame History Unescape Escape