Number
The Number
control provides your component a number
value that is editable in the Makeswift
builder.
AnchorExamples
AnchorHTML input element
In this example we use the <input type="number">
element
and make the defaultValue
, min
, and max
props controllable with Number
controls.
import { ReactRuntime } from '@makeswift/runtime/react'
import { Number } from '@makeswift/runtime/controls'
export function NumberComponent({ defaultValue, min, max }) {
return <input type="number" defaultValue={defaultValue} min={min} max={max} />
}
ReactRuntime.registerComponent(NumberComponent, {
type: 'number-component',
label: 'NumberComponent',
props: {
defaultValue: Number({ label: 'Default value', defaultValue: 3 }),
min: Number({ label: 'Min', defaultValue: 0 }),
max: Number({ label: 'Max', defaultValue: 10 }),
},
})
AnchorAPI
AnchorParameters
Parameter | Type | Required | Default | Description |
---|---|---|---|---|
label | string | no | 'Number' | Text for the panel label. |
labelOrientation | LabelOrientation | no | 'horizontal' | Position of the panel label. |
defaultValue | number | no | undefined | Will be used when the value isn't set. |
min | number | no | 0 | The smallest number that can be set in the panel input. |
max | number | no | Infinity | The largest number that can be set in the panel input. |
step | number | no | 1 | Amount to increment by when using ↑, ↓, or dragging the panel input. |
suffix | string | no | '' | Decorative text appended to the end of the panel input. |
AnchorProvided value
The Number
control provides a number
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'