PropertyGrid

PropertyGridRoot separates responsive property fields from optional intrinsic-width actions. It exposes structural data attributes without imposing column widths, gaps, or presentation.

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

<template>
  <PropertyGridRoot :columns="2">
    <label>
      Width
      <input type="number" />
    </label>
    <label>
      Height
      <input type="number" />
    </label>
    <template #actions>
      <button type="button" aria-label="Constrain proportions">Link</button>
    </template>
  </PropertyGridRoot>
</template>

Themes can target data-slot="fields", data-slot="actions", data-columns, and data-distribution. The wide-first distribution is semantic; consumers choose its exact ratio.

Generated API reference

PropertyGridRoot

Generated from packages/vue/src/primitives/PropertyGrid/PropertyGridRoot.vue

Props

Prop	Default	Type
columns Number of field columns.	1	PropertyGridColumns | undefined
distribution Relative distribution of field columns.	"equal"	PropertyGridDistribution | undefined

Slots

Slot	Props	Description
default Property fields arranged by the consumer's visual theme.	any	Property fields arranged by the consumer's visual theme.
actions Optional intrinsic-width controls kept separate from the field grid.	any	Optional intrinsic-width controls kept separate from the field grid.