useLayout

useLayout() — основной компосабл управления для панелей, связанных с лейаутом.

Предоставляет состояние и действия для:

• режима flex vs grid
• размеров по ширине/высоте
• отступов
• выравнивания
• редактирования треков шаблона сетки

Использование

import { useLayout } from '@open-pencil/vue'

const layout = useLayout()

Базовый пример

const {
  isGrid,
  isFlex,
  widthSizing,
  heightSizing,
  setWidthSizing,
  setHeightSizing,
} = useLayout()

Практические примеры

Переключение между единым и раздельным отступом

layout.toggleIndividualPadding()

Обновление треков сетки

layout.updateGridTrack('gridTemplateColumns', 0, { sizing: 'FIXED', value: 240 })
layout.addTrack('gridTemplateRows')

Изменение выравнивания

layout.setAlignment('CENTER', 'MAX')

Связанные API

• usePosition
• useEditor