useLayout

useLayout() предоставляет состояние и действия для панелей компоновки:

• выбор между flex и grid;
• режимы ширины и высоты;
• отступы;
• выравнивание;
• изменение дорожек grid template.

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

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

const layout = useLayout()

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

const {
  isGrid,
  isFlex,
  widthSizing,
  heightSizing,
  setAxisSizing,
  updateAxisSize,
  commitAxisSize,
} = useLayout()

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

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

layout.toggleIndividualPadding()

Изменить дорожки grid

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

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

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

Связанные API

• usePosition
• useEditor