openpencil/packages/docs/pl/programmable/sdk/guides/property-panels.md

title	description
Panele właściwości	Buduj panele właściwości z kompozytami kontrolek i bezstanowymi prymitywami list.

Panele właściwości

Panele właściwości w @open-pencil/vue są celowo oparte na kompozytach.

Jeśli panel potrzebuje głównie wartości pochodnych od selekcji i akcji aktualizacji, preferuj kompozyty. Jeśli panel potrzebuje wielokrotnie używalnej struktury tablicowej/listowej, użyj bezstanowego prymitywu jak PropertyListRoot.

Typowe kompozyty kontrolek

Dla standardowych sekcji właściwości zacznij od:

• usePosition()
• useLayout()
• useAppearance()
• useTypography()
• useExport()

Dla paneli listowych użyj:

• useFillControls()
• useStrokeControls()
• useEffectsControls()

Przykład: panel pozycji

<script setup lang="ts">
import { usePosition } from '@open-pencil/vue'

const { x, y, width, height, updateProp, commitProp } = usePosition()
</script>

<template>
  <div class="grid grid-cols-2 gap-2">
    <input :value="x" @input="updateProp('x', Number(($event.target as HTMLInputElement).value))" />
    <input :value="y" @input="updateProp('y', Number(($event.target as HTMLInputElement).value))" />
    <input :value="width" @input="updateProp('width', Number(($event.target as HTMLInputElement).value))" />
    <input :value="height" @input="updateProp('height', Number(($event.target as HTMLInputElement).value))" />
  </div>
</template>

Przykład: panel wypełnień

<script setup lang="ts">
import { PropertyListRoot, useFillControls } from '@open-pencil/vue'

const fillControls = useFillControls()
</script>

<template>
  <PropertyListRoot prop-key="fills" v-slot="{ items, add, remove }">
    <div v-for="(fill, index) in items" :key="index">
      {{ fill.type }}
      <button @click="remove(index)">Usuń</button>
    </div>

    <button @click="add(fillControls.defaultFill)">Dodaj wypełnienie</button>
  </PropertyListRoot>
</template>

Zasada

• używaj kompozytów dla bezpośredniej logiki kontrolek
• używaj prymitywów strukturalnych, gdy powtarzalna koordynacja listy/drzewa/slotu jest trudną częścią

Powiązane API

• usePosition
• useLayout
• useAppearance
• useTypography
• useFillControls
• useStrokeControls
• useEffectsControls
• PropertyListRoot