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 | Travaillez avec l'auto-layout, le dimensionnement, les marges internes, l'alignement et les pistes de grille. |
useLayout
useLayout() est le composable de contrôle principal pour les panneaux liés au layout.
Il expose l'état et les actions pour :
- le mode flex ou grille
- le dimensionnement largeur/hauteur
- les marges internes
- l'alignement
- l'édition des pistes de template de grille
Utilisation
import { useLayout } from '@open-pencil/vue'
const layout = useLayout()
Exemple de base
const {
isGrid,
isFlex,
widthSizing,
heightSizing,
setAxisSizing,
updateAxisSize,
commitAxisSize,
} = useLayout()
Exemples pratiques
Basculer entre les marges internes uniformes et individuelles
layout.toggleIndividualPadding()
Mettre à jour les pistes de grille
layout.updateGridTrack('gridTemplateColumns', 0, { sizing: 'FIXED', value: 240 })
layout.addTrack('gridTemplateRows')
Changer l'alignement
layout.setAlignment('CENTER', 'MAX')