useLayout

useLayout() è il composable di controllo principale per i pannelli relativi al layout.

Espone stato e azioni per:

• modalità flex vs grid
• dimensionamento larghezza/altezza
• padding
• allineamento
• modifica delle tracce dei template della griglia

Utilizzo

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

const layout = useLayout()

Esempio base

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

Esempi pratici

Alterna tra UI di padding uniforme e individuale

layout.toggleIndividualPadding()

Aggiorna le tracce della griglia

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

Cambia l'allineamento

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

API correlate

• usePosition
• useEditor