Reference@makeswift/runtimeControls

Color

Adds a Color picker panel in the Makeswift builder to visually edit a RGBA string prop.

Color panels on a Button component to edit the background and text colors

Params

label
stringDefaults to Text

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
"vertical" | "horizontal"Defaults to horizontal

Position for the color label within the panel.

defaultValue
string

The value passed to your component when nothing is set in the Makeswift builder. Must be a valid CSS color string.

hideAlpha
boolean

Indicates whether to hide the alpha channel slider.

Prop type

The Color control passes a string RGBA value to your component. If you don’t set a defaultValue and no value is set in the builder, your component will receive undefined.

Example

The following examples adds two Color controls to the backgroundColor and color props of a Button component.

Using inline styles

1import { Color } from "@makeswift/runtime/controls";
2
3import { runtime } from "../../../../../makeswift/runtime";
4
5import { Button } from "./Button";
6
7runtime.registerComponent(Button, {
8  type: "button",
9  label: "Button",
10  props: {
11    backgroundColor: Color({
12      label: "Background color",
13      defaultValue: "black",
14    }),
15    color: Color({
16      label: "Text color",
17      defaultValue: "white",
18    }),
19  },
20});

Using CSS variables

1import { Color } from "@makeswift/runtime/controls";
2import { runtime } from "../../../../../lib/makeswift/runtime";
3
4import { Button } from "./Button";
5
6runtime.registerComponent(Button, {
7  type: "button",
8  label: "Button",
9  props: {
10    backgroundColor: Color({
11      label: "Background color",
12      defaultValue: "black",
13    }),
14    color: Color({
15      label: "Text color",
16      defaultValue: "white",
17    }),
18  },
19});

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