Style

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

At the moment this control maybe only be used once per component. A solution for this is currently being worked on.

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.

Box style panel

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

ParameterTypeRequiredDefaultDescription
propertiesStyleControlProperty[]noStyle.DefaultThe CSS properties that should be configurable in the panels.

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

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,
}