0071c32544
- Add a headless PropertyGrid primitive with themed app composition - Keep composite paint details full-width and show remove actions consistently - Tighten color picker and Design-panel field sizing without clipping values
1.1 KiB
1.1 KiB
| title | description |
|---|---|
| PropertyGrid | Headless field-grid and action-rail anatomy for property panels. |
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.