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
Parameter | Type | Required | Default | Description |
---|---|---|---|---|
properties | StyleControlProperty[] | no | Style.Default | The 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
Style.TextStyle
Also the following presets are available:
Style.Default
which includesStyle.Width
andStyle.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,
}