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.1 KiB
1.1 KiB
| title | description |
|---|---|
| useLayout | Mit Auto-Layout, Größenanpassung, Innenabstand, Ausrichtung und Raster-Tracks arbeiten. |
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,
setAxisSizing,
updateAxisSize,
commitAxisSize,
} = 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')