64 lines
1.4 KiB
Markdown
64 lines
1.4 KiB
Markdown
|
---
|
|||
|
|
title: useLayout
|
|||
|
|
description: Работа с автолейаутом, размерами, отступами, выравниванием и треками сетки.
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# useLayout
|
|||
|
|
|
|||
|
|
`useLayout()` — основной компосабл управления для панелей, связанных с лейаутом.
|
|||
|
|
|
|||
|
|
Предоставляет состояние и действия для:
|
|||
|
|
|
|||
|
|
- режима flex vs grid
|
|||
|
|
- размеров по ширине/высоте
|
|||
|
|
- отступов
|
|||
|
|
- выравнивания
|
|||
|
|
- редактирования треков шаблона сетки
|
|||
|
|
|
|||
|
|
## Использование
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
import { useLayout } from '@open-pencil/vue'
|
|||
|
|
|
|||
|
|
const layout = useLayout()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Базовый пример
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
const {
|
|||
|
|
isGrid,
|
|||
|
|
isFlex,
|
|||
|
|
widthSizing,
|
|||
|
|
heightSizing,
|
|||
|
|
setWidthSizing,
|
|||
|
|
setHeightSizing,
|
|||
|
|
} = useLayout()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Практические примеры
|
|||
|
|
|
|||
|
|
### Переключение между единым и раздельным отступом
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
layout.toggleIndividualPadding()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Обновление треков сетки
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
layout.updateGridTrack('gridTemplateColumns', 0, { sizing: 'FIXED', value: 240 })
|
|||
|
|
layout.addTrack('gridTemplateRows')
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Изменение выравнивания
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
layout.setAlignment('CENTER', 'MAX')
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Связанные API
|
|||
|
|
|
|||
|
|
- [usePosition](./use-position)
|
|||
|
|
- [useEditor](./use-editor)
|