Color
The Color
control provides your component an RGB string
value that is editable in the Makeswift
builder. The colors are stored and managed by Makeswift and can be shared across pages in a site.
AnchorExamples
AnchorA simple button
In this example we register a simple Button
component with color
and backgroundColor
props
controlled by Color
controls.
import { ReactRuntime } from '@makeswift/runtime/react'
import { Color } from '@makeswift/runtime/controls'
function Button({ backgroundColor, color }) {
return <button style={{ backgroundColor, color }}>Save</button>
}
ReactRuntime.registerComponent(Button, {
type: 'button',
label: 'Button',
props: {
backgroundColor: Color({ label: 'Color', defaultValue: 'black' }),
color: Color({ label: 'Text color', defaultValue: 'white' }),
},
})
AnchorAPI
AnchorParameters
Parameter | Type | Required | Default | Description |
---|---|---|---|---|
label | string | no | 'Text' | Text for the panel label. |
labelOrientation | LabelOrientation | no | 'horizontal' | Position of the panel label. |
defaultValue | string | no | string | Will be used when the value isn't set. Can be any CSS color string. |
hideAlpha | boolean | no | false | Whether to hide the alpha channel slider. |
AnchorProvided value
The Color
control provides an RGB string
value to your component—or undefined
if there's no
value set. Use defaultValue
if you never want your component to receive undefined
.
AnchorTypes
type LabelOrientation = 'vertical' | 'horizontal'