Workspace
Property panels
A key/value editor for text, number, boolean and select
Sidebar
Sidebar
align=left · name=Sidebar · visible=true · width=240
Usage
import { PropertyPanel, type PropertyRow } from "@gpuixui/files";
const rows: ReadonlyArray<PropertyRow> = [
{ type: "text", key: "name", label: "Name", value: name },
{ type: "number", key: "count", label: "Count", value: count },
{ type: "boolean", key: "active", label: "Active", value: active },
{ type: "select", key: "kind", label: "Kind", value: kind, options: KINDS },
];
<PropertyPanel title="Shape" rows={rows} onChange={(record) => apply(record)} />;A number row's label is its scrub handle: drag it horizontally to step the
value (Shift is ten steps) and a click still selects the field for typing. A
row's optional min/max/step bound the drag and the field.
API
| Prop | Type | Default | Consequence |
|---|---|---|---|
rows | PropertyRow[] | — | the rows, in paint order |
onChange | (record: PropertyRecord) => void | — | receives the whole record after every edit |
title | string | — | the panel's header title |
labelWidth | number | 120 | the label column's width, in pixels |
testId | string | — | the panel; each label is ${testId}-label-${key} |
Edit this page on GitHubpackages/files/docs/property-panel.mdx