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 KiB
1 KiB
| title | description |
|---|---|
| useLayout | Pracuj z auto-layoutem, rozmiarem, paddingiem, wyrównaniem i torami siatki. |
useLayout
useLayout() to główny kompozyt kontrolek dla paneli związanych z layoutem.
Udostępnia stan i akcje dla:
- trybu flex vs grid
- rozmiaru szerokości/wysokości
- paddingu
- wyrównania
- edycji torów szablonu siatki
Użycie
import { useLayout } from '@open-pencil/vue'
const layout = useLayout()
Podstawowy przykład
const {
isGrid,
isFlex,
widthSizing,
heightSizing,
setAxisSizing,
updateAxisSize,
commitAxisSize,
} = useLayout()
Przykłady praktyczne
Przełącz między jednolitym i indywidualnym paddingiem
layout.toggleIndividualPadding()
Aktualizuj tory siatki
layout.updateGridTrack('gridTemplateColumns', 0, { sizing: 'FIXED', value: 240 })
layout.addTrack('gridTemplateRows')
Zmień wyrównanie
layout.setAlignment('CENTER', 'MAX')