​
Params

type
Control
required

The control that determines the type and values in the array passed to your component. Can be any of the Makeswift controls.

label
string
default: "List"

Text for the panel label that appears in the Makeswift builder.

getItemLabel
(item: T) => string

A function to get the label for each list item shown in the panel. If you don’t provide a value, the control passes an undefined value to your component.

​
Prop type

The Link control passes an array of values based on the type control.

​
Examples

​
An array of strings

This example adds an List control to the accordionTitles prop of an Accordions component.

import { List, TextInput } from "@makeswift/runtime/controls"

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

import { Accordions } from "./Accordions"

runtime.registerComponent(Accordions, {
  type: "accordions",
  label: "Accordions",
  props: {
    accordionTitles: List({
      label: "Accordions",
      type: TextInput({ label: "Title", defaultValue: "Accordion Title" }),
      getItemLabel(item) {
        return item ?? "Accordion Title"
      },
    }),
  },
})

​
An array of objects

This example uses the Shape control to define the structure of the objects in the accordions array.

import { runtime } from "@/lib/makeswift/runtime"
import { List, Shape, TextInput, TextArea } from "@makeswift/runtime/controls"

import { Accordions } from "./Accordions"

runtime.registerComponent(Accordions, {
  type: "accordions",
  label: "Accordions",
  props: {
    accordions: List({
      label: "Accordions",
      type: Shape({
        type: {
          title: TextInput({ label: "Title", defaultValue: "Accordion Title" }),
          body: TextArea({ label: "Body", defaultValue: "This is the body!" }),
        },
      }),
      getItemLabel(item) {
        return item ?? "Accordion Title"
      },
    }),
  },
})

.makeswift.ts is a naming convention for organizing Makeswift registration code. Read more about this pattern here.

Was this page helpful?

LinkNumber