Data display
Property panels
A panel of property rows over one object the caller owns
Alpha — 120 x 80
Properties
NameAlpha
Tag
Size120 x 80
Area9600 px
KindWidget
OwnerAda Lovelace
Tagnone
Size120 x 80
Area9600px²width × height
Usage
import { PropertyPanel } from "@gpuixui/data";
<PropertyPanel
title="Properties"
rows={[
{ kind: "readonly", key: "tag", label: "Tag", value: tag },
{ kind: "editable", key: "name", label: "Name", value: name, onChange: setName },
]}
/>;API
PropertyPanel
| Prop | Type | Default | Consequence |
|---|---|---|---|
title | string | — | the panel's header; a blank title paints no header, never an unnamed one |
rows | PropertyRow[] | — | the rows, in the order they paint; a blank label reads as the row's key, a value that is not a list paints no rows, and a row without a text key is not a row |
labelWidth | number | 120 | the label column's width; one the layout cannot paint reads as 120 (the key-value list's rule) |
className | string | — | joined after the recipe |
PropertyRow
| Field | Type | Which rows | Consequence |
|---|---|---|---|
kind | "readonly" | "editable" | both | the discriminator; only an editable row carries a change |
key | string | both | the stable identity a row is addressed by; an editable row's field is property-${key}, and a row whose key is not text is not a row |
label | string | both | the words in the label column, and an editable field's accessible name |
value | string | both | the value the row shows, or the text the field edits |
onChange | (next: string) => void | editable | receives every edit of the row's value |
Edit this page on GitHubpackages/data/docs/property-panel.mdx