64 lines
979 B
Markdown
64 lines
979 B
Markdown
---
|
|
title: useLayout
|
|
description: 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
|
|
|
|
```ts
|
|
import { useLayout } from '@open-pencil/vue'
|
|
|
|
const layout = useLayout()
|
|
```
|
|
|
|
## Basic example
|
|
|
|
```ts
|
|
const {
|
|
isGrid,
|
|
isFlex,
|
|
widthSizing,
|
|
heightSizing,
|
|
setWidthSizing,
|
|
setHeightSizing,
|
|
} = useLayout()
|
|
```
|
|
|
|
## Practical examples
|
|
|
|
### Toggle between uniform and individual padding UI
|
|
|
|
```ts
|
|
layout.toggleIndividualPadding()
|
|
```
|
|
|
|
### Update grid tracks
|
|
|
|
```ts
|
|
layout.updateGridTrack('gridTemplateColumns', 0, { sizing: 'FIXED', value: 240 })
|
|
layout.addTrack('gridTemplateRows')
|
|
```
|
|
|
|
### Change alignment
|
|
|
|
```ts
|
|
layout.setAlignment('CENTER', 'MAX')
|
|
```
|
|
|
|
## Related APIs
|
|
|
|
- [usePosition](./use-position)
|
|
- [useEditor](./use-editor)
|