Number

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

A Number panel on a Feed component to set the number of items shown

Params

label · string · default: "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" · default: "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 · number · default: 0

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

max · number · default: 0

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

step · number · default: 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

Feed.makeswift.ts

import { Number } from "@makeswift/runtime/controls";

import { runtime } from "@/makeswift/runtime";

import { Feed } from "./Feed";

runtime.registerComponent(Feed, {
  type: "feed",
  label: "Feed",
  props: {
    itemsShown: Number({
      label: "Items shown",
      defaultValue: 10,
      min: 0,
      max: 100,
    }),
  },
});

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