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,
  setWidthSizing,
  setHeightSizing,
} = 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')

Powiązane API

• usePosition
• useEditor