Style

Add a Style control to your component in the Makeswift builder to visually edit a CSS class string prop.

The Style control is the only control that is responsive; its values can be changed at different viewport sizes without affecting the others. For example, you could set a width of 1200px in desktop and 100% in mobile.

Params

properties

StyleProperty[] | Style.All | Style.DefaultDefaults to Style.Default

An array of style properties that can be visually edited. These values include:

Style.Width
Style.Margin
Style.Padding
Style.Border
Style.BorderRadius
Style.TextStyle

The following presets are also available:

Style.Default which is equivalent to [Style.Width, Style.Margin]
Style.All which includes all properties.

Example

The following example adds a Style control to the className prop of an Image component.

1 import { Style } from "@makeswift/runtime/controls"
2 
3 import { runtime } from "../../../../../makeswift/runtime"
4 
5 import { Image } from "./Image"
6 
7 runtime.registerComponent(Image, {
8   type: "image",
9   label: "Image",
10   props: {
11     className: Style({ properties: Style.All }),
12   },
13 })

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

1	import { Style } from "@makeswift/runtime/controls"
2
3	import { runtime } from "../../../../../makeswift/runtime"
4
5	import { Image } from "./Image"
6
7	runtime.registerComponent(Image, {
8	type: "image",
9	label: "Image",
10	props: {
11	className: Style({ properties: Style.All }),
12	},
13	})