979 B
979 B
| title | description |
|---|---|
| useLayout | Work with auto-layout, sizing, padding, alignment, and grid tracks. |
useLayout
useLayout() is the main control composable for layout-related panels.
It exposes state and actions for:
- flex vs grid mode
- width/height sizing
- padding
- alignment
- grid template track editing
Usage
import { useLayout } from '@open-pencil/vue'
const layout = useLayout()
Basic example
const {
isGrid,
isFlex,
widthSizing,
heightSizing,
setWidthSizing,
setHeightSizing,
} = useLayout()
Practical examples
Toggle between uniform and individual padding UI
layout.toggleIndividualPadding()
Update grid tracks
layout.updateGridTrack('gridTemplateColumns', 0, { sizing: 'FIXED', value: 240 })
layout.addTrack('gridTemplateRows')
Change alignment
layout.setAlignment('CENTER', 'MAX')