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
100 lines
6 KiB
Markdown
100 lines
6 KiB
Markdown
---
|
||
title: Автоматическая компоновка
|
||
description: "Flexbox и CSS Grid в OpenPencil: направление, интервалы, отступы, выравнивание и размеры дочерних объектов."
|
||
---
|
||
|
||
# Автоматическая компоновка
|
||
|
||
Автоматическая компоновка размещает дочерние объекты внутри фрейма. Доступны два режима: **Flex** с горизонтальным или вертикальным потоком и **Grid** со строками, столбцами и настраиваемыми дорожками.
|
||
|
||
## Включение
|
||
|
||
- Выделите фрейм и нажмите <kbd>⇧</kbd><kbd>A</kbd>, чтобы включить или отключить автоматическую компоновку.
|
||
- Выделите несколько отдельных объектов и нажмите <kbd>⇧</kbd><kbd>A</kbd>, чтобы поместить их в новый фрейм.
|
||
|
||
При создании фрейма OpenPencil сначала сортирует объекты по их видимому положению.
|
||
|
||
## Направление
|
||
|
||
- **Горизонтальное:** объекты располагаются слева направо.
|
||
- **Вертикальное:** объекты располагаются сверху вниз.
|
||
- **Перенос:** при нехватке места объекты переходят на следующую строку или в следующий столбец.
|
||
|
||
## Расстояния
|
||
|
||
### Интервал
|
||
|
||
Интервал определяет расстояние между соседними дочерними объектами.
|
||
|
||
### Внутренние отступы
|
||
|
||
Внутренние отступы задают расстояние между границей фрейма и его содержимым. Можно использовать одно общее значение или настроить каждую сторону отдельно.
|
||
|
||
## Выравнивание
|
||
|
||
### Основная ось
|
||
|
||
- **Начало:** объекты располагаются у начала оси.
|
||
- **Центр:** объекты выравниваются по центру.
|
||
- **Конец:** объекты располагаются у конца оси.
|
||
- **Распределить:** свободное место равномерно распределяется между объектами.
|
||
|
||
### Поперечная ось
|
||
|
||
- **Начало:** выравнивание по началу поперечной оси.
|
||
- **Центр:** выравнивание по центру.
|
||
- **Конец:** выравнивание по концу оси.
|
||
- **Растянуть:** дочерние объекты занимают всю поперечную ось.
|
||
|
||
## Размер дочерних объектов
|
||
|
||
- **Фиксированный:** использовать явно заданную ширину или высоту.
|
||
- **Заполнить:** занять доступное место.
|
||
- **По содержимому:** подобрать размер по содержимому.
|
||
|
||
Первое фактическое изменение ширины или высоты переводит только эту ось из режима «Заполнить» или «По содержимому» в фиксированный режим. Простое получение фокуса полем не меняет режим размера.
|
||
|
||
## Изменение порядка
|
||
|
||
Перетащите дочерний объект внутри фрейма, чтобы изменить его место среди соседних. Индикатор покажет новую позицию.
|
||
|
||
## Сочетание клавиш
|
||
|
||
| Действие | macOS | Windows / Linux |
|
||
|----------|-------|-----------------|
|
||
| Включить или отключить компоновку | <kbd>⇧</kbd><kbd>A</kbd> | <kbd>Shift</kbd><kbd>A</kbd> |
|
||
|
||
## 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 подходит для панелей мониторинга, галерей, форм и других двумерных структур.
|