Number

Adds a Number input in the Makeswift builder to visually edit a number prop.

Params

label

stringDefaults to Number

Text for the panel label in the Makeswift builder.

description

string

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format. Added in v0.24.8.

labelOrientation

"horizontal" | "vertical"Defaults to horizontal

Orientation of the number label within the panel.

defaultValue

number

The value passed to your component when nothing is set in the Makeswift builder.

min

number0

The smallest number that can be set in the panel input.

max

number0

The largest number that can be set in the panel input.

step

numberDefaults to 1

The increment amount when using the ↑ ↓ arrows or dragging the panel input.

suffix

string

Decorative text appended to the end of the panel input.

Prop type

The Number control passes a number to your component. If you don’t set a defaultValue and no value is set in the builder, your component receives undefined.

Example

1 import { Number } from "@makeswift/runtime/controls";
2 
3 import { runtime } from "../../../../../makeswift/runtime";
4 
5 import { Feed } from "./Feed";
6 
7 runtime.registerComponent(Feed, {
8   type: "feed",
9   label: "Feed",
10   props: {
11     itemsShown: Number({
12       label: "Items shown",
13       defaultValue: 10,
14       min: 0,
15       max: 100,
16     }),
17   },
18 });

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

1	import { Number } from "@makeswift/runtime/controls";
2
3	import { runtime } from "../../../../../makeswift/runtime";
4
5	import { Feed } from "./Feed";
6
7	runtime.registerComponent(Feed, {
8	type: "feed",
9	label: "Feed",
10	props: {
11	itemsShown: Number({
12	label: "Items shown",
13	defaultValue: 10,
14	min: 0,
15	max: 100,
16	}),
17	},
18	});