Shape

Adds a Shape panel in the Makeswift builder to visually edit an object.

The Shape control can be nested as deeply as you want within Shape and List controls.

Params

type

{ [key: string]: Control }Required

An object of controls in which the type and values returned from each control determines the shape of the overall value passed to your component. May consist of any of the Makeswift controls.

Prop type

The Shape control passes an object based on the controls used in the type field. The keys of the object are the keys of the controls in the type field, and the values are based on the corresponding control’s prop type.

Example

This example adds a Shape control to the type field of a List control for a Feature Grid component.

1 import {
2   List,
3   Shape,
4   TextInput,
5   TextArea,
6   Image,
7 } from "@makeswift/runtime/controls"
8 
9 import { runtime } from "../../../../../makeswift/runtime"
10 
11 import { FeatureGrid } from "./FeatureGrid"
12 
13 runtime.registerComponent(FeatureGrid, {
14   type: "feature-grid",
15   label: "Feature Grid",
16   props: {
17     features: List({
18       label: "Features",
19       type: Shape({
20         type: {
21           icon: Image({ label: "Icon" }),
22           iconAltText: TextInput({
23             label: "Icon alt text",
24             defaultValue: "icon",
25           }),
26           heading: TextArea({
27             label: "Heading",
28             defaultValue: "This is a heading",
29           }),
30           description: TextArea({
31             label: "Description",
32             defaultValue: "This is a description.",
33           }),
34         },
35       }),
36     }),
37   },
38 })

.makeswift.ts is a naming convention for organizing Makeswift registration code. Learn more.

1	import {
2	List,
3	Shape,
4	TextInput,
5	TextArea,
6	Image,
7	} from "@makeswift/runtime/controls"
8
9	import { runtime } from "../../../../../makeswift/runtime"
10
11	import { FeatureGrid } from "./FeatureGrid"
12
13	runtime.registerComponent(FeatureGrid, {
14	type: "feature-grid",
15	label: "Feature Grid",
16	props: {
17	features: List({
18	label: "Features",
19	type: Shape({
20	type: {
21	icon: Image({ label: "Icon" }),
22	iconAltText: TextInput({
23	label: "Icon alt text",
24	defaultValue: "icon",
25	}),
26	heading: TextArea({
27	label: "Heading",
28	defaultValue: "This is a heading",
29	}),
30	description: TextArea({
31	label: "Description",
32	defaultValue: "This is a description.",
33	}),
34	},
35	}),
36	}),
37	},
38	})