useLayout

useLayout() ist das Haupt-Steuerelemente-Composable für layout-bezogene Panels.

Es gibt Zustand und Aktionen zurück für:

• Flex- vs. Rastermodus
• Breite/Höhe-Größenanpassung
• Innenabstand
• Ausrichtung
• Raster-Template-Track-Bearbeitung

Verwendung

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

const layout = useLayout()

Einfaches Beispiel

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

Praktische Beispiele

Zwischen einheitlichem und individuellem Innenabstand wechseln

layout.toggleIndividualPadding()

Raster-Tracks aktualisieren

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

Ausrichtung ändern

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

Verwandte APIs

• usePosition
• useEditor