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 | Lavora con auto-layout, dimensionamento, padding, allineamento e tracce della griglia. |
useLayout
useLayout() è il composable di controllo principale per i pannelli relativi al layout.
Espone stato e azioni per:
- modalità flex vs grid
- dimensionamento larghezza/altezza
- padding
- allineamento
- modifica delle tracce dei template della griglia
Utilizzo
import { useLayout } from '@open-pencil/vue'
const layout = useLayout()
Esempio base
const {
isGrid,
isFlex,
widthSizing,
heightSizing,
setAxisSizing,
updateAxisSize,
commitAxisSize,
} = useLayout()
Esempi pratici
Alterna tra UI di padding uniforme e individuale
layout.toggleIndividualPadding()
Aggiorna le tracce della griglia
layout.updateGridTrack('gridTemplateColumns', 0, { sizing: 'FIXED', value: 240 })
layout.addTrack('gridTemplateRows')
Cambia l'allineamento
layout.setAlignment('CENTER', 'MAX')