Image Placeholder
The Image Placeholder placeholder-image
is a layout field, it shows any image, it
doesn't return any value.
Example
{
"component": "placeholder-image",
"label": "Field 1",
"name": "my_placeholder",
"url": "https://unpkg.com/lets-form-icons@1.0.1/generic.svg",
"react-rsuite5": {
"maxWidth": 30,
"maxHeight": 40
},
"react-material-ui": {
"maxWidth": 100
}
}
Loading...
Transformer JS
The values of a placeholder-image
can be changed dynamically with a JavaScript Transformer, for example:
// ...
fields: [
{
component: 'checkbox',
name: 'showPassword',
script: `
if (showPassword) {
setValue('eye', 'url', 'https://unpkg.com/lets-form-icons@1.0.1/eye.svg');
} else {
setValue('eye', 'url', 'https://unpkg.com/lets-form-icons@1.0.1/eye-off.svg');
}`
},
{
component: 'placeholder-image',
name: 'eye',
url: 'https://unpkg.com/lets-form-icons@1.0.1/eye.svg'
}
]
Reference
Property | Type | Description |
---|---|---|
component | string | = "placeholder-image" |
name | string | |
url | string | URL of the image to show |
align | string | Image alignment. Values: "left", "center", "right". |
hidden | boolean | Hides the field from the form |
Pick up a framework to show specific properties |