Style

The Style control provides your component a CSS class string value that references CSS styles editable in the Makeswift builder.

The Style control is the only control that is "responsive" and 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.

AnchorExamples

AnchorA simple box

In this example we register a Box component and control its className prop using a Style control with all properties enabled.

import { ReactRuntime } from '@makeswift/runtime/react'
import { Style } from '@makeswift/runtime/controls'

function Box({ className }) {
  return <div className={className}>I'm a box!</div>
}

ReactRuntime.registerComponent(Box, {
  type: 'box',
  label: 'Box',
  props: {
    className: Style({ properties: Style.All }),
  },
})

AnchorAPI

AnchorParameters

AnchorProperties

The properties param can be used to configure the CSS properties that are available to edit in the Makeswift builder. The following are the available property values:

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

Also the following presets are available:

• Style.Default which includes Style.Width and Style.Margin
• Style.All which includes all properties

AnchorProvided value

The Style control provides a CSS class as a string value to your component.

AnchorTypes

enum StyleControlProperty {
  Width,
  Margin,
  Padding,
  Border,
  BorderRadius,
  TextStyle,
}