`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'