64 lines
1 KiB
Markdown
64 lines
1 KiB
Markdown
|
---
|
||
|
|
title: useLayout
|
||
|
|
description: Trabaja con auto-layout, tamaño, relleno, alineación y pistas de cuadrícula.
|
||
|
|
---
|
||
|
|
|
||
|
|
# useLayout
|
||
|
|
|
||
|
|
`useLayout()` es el composable de control principal para los paneles relacionados con el layout.
|
||
|
|
|
||
|
|
Expone estado y acciones para:
|
||
|
|
|
||
|
|
- modo flex vs grid
|
||
|
|
- tamaño de ancho/alto
|
||
|
|
- relleno
|
||
|
|
- alineación
|
||
|
|
- edición de pistas de plantilla de cuadrícula
|
||
|
|
|
||
|
|
## Uso
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import { useLayout } from '@open-pencil/vue'
|
||
|
|
|
||
|
|
const layout = useLayout()
|
||
|
|
```
|
||
|
|
|
||
|
|
## Ejemplo básico
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const {
|
||
|
|
isGrid,
|
||
|
|
isFlex,
|
||
|
|
widthSizing,
|
||
|
|
heightSizing,
|
||
|
|
setWidthSizing,
|
||
|
|
setHeightSizing,
|
||
|
|
} = useLayout()
|
||
|
|
```
|
||
|
|
|
||
|
|
## Ejemplos prácticos
|
||
|
|
|
||
|
|
### Alternar entre relleno uniforme e individual
|
||
|
|
|
||
|
|
```ts
|
||
|
|
layout.toggleIndividualPadding()
|
||
|
|
```
|
||
|
|
|
||
|
|
### Actualizar pistas de cuadrícula
|
||
|
|
|
||
|
|
```ts
|
||
|
|
layout.updateGridTrack('gridTemplateColumns', 0, { sizing: 'FIXED', value: 240 })
|
||
|
|
layout.addTrack('gridTemplateRows')
|
||
|
|
```
|
||
|
|
|
||
|
|
### Cambiar la alineación
|
||
|
|
|
||
|
|
```ts
|
||
|
|
layout.setAlignment('CENTER', 'MAX')
|
||
|
|
```
|
||
|
|
|
||
|
|
## APIs relacionadas
|
||
|
|
|
||
|
|
- [usePosition](./use-position)
|
||
|
|
- [useEditor](./use-editor)
|