fcdf7f1d4c
- Replace duplicated width and height binding branches with shared semantic fields - Switch edited Hug and Fill dimensions to Fixed in one reversible transaction - Add typed LayoutControls actions, documentation, and visual coverage
1.4 KiB
1.4 KiB
| title | description |
|---|---|
| useLayout | Работа с автолейаутом, размерами, отступами, выравниванием и треками сетки. |
useLayout
useLayout() — основной компосабл управления для панелей, связанных с лейаутом.
Предоставляет состояние и действия для:
- режима flex vs grid
- размеров по ширине/высоте
- отступов
- выравнивания
- редактирования треков шаблона сетки
Использование
import { useLayout } from '@open-pencil/vue'
const layout = useLayout()
Базовый пример
const {
isGrid,
isFlex,
widthSizing,
heightSizing,
setAxisSizing,
updateAxisSize,
commitAxisSize,
} = useLayout()
Практические примеры
Переключение между единым и раздельным отступом
layout.toggleIndividualPadding()
Обновление треков сетки
layout.updateGridTrack('gridTemplateColumns', 0, { sizing: 'FIXED', value: 240 })
layout.addTrack('gridTemplateRows')
Изменение выравнивания
layout.setAlignment('CENTER', 'MAX')