Component Properties
The properties attribute can be used to define custom properties on <Section>
, <Banner>
, <Box>
, or <Element>
tags. It is defined by providing an array of objects. Each object represents a property that will be displayed on the Properties tab within the page editor.
Use custom properties to enable additional layouts or functionality for a component.
<Section
dataRef={content.section}
properties={[
{
"name": "layout",
"label": "Layout",
"attribute": "class",
"type": "select",
"options": [
{ "label": "Default", "value": "default" },
{ "label": "Full", "value": "full" },
{ "label": "Grid", "value": "grid" },
{ "label": "Offset", "value": "offset" },
{ "label": "Collage", "value": "collage" },
{ "label": "List", "value": "list" }
],
"default": "center",
"placeholder": "...",
"required": true
}
]}
>
Component properties can be referenced using the properties
variable. This variable is attached to the variable referenced by the dataRef
of the component. For example, for Section components it's:
{ content.section.properties.layout } // Outputs the layout
Properties can be used to add many powerful features to your components.
Arguments
type: string - value for the type of the property. Can be one of text, number, select, multiselect, date, time, datetime, checkbox, checklist, or color.
name: string - value for the name of the property that will be stored in the tag configurations.
label: string (optional) - the label that will be shown to content authors. If not set it will pull the value from the name property and sentence case it (capitalize the first letter).
attribute: string (optional) - value for the rendered element's HTML attribute that will be changed by the property when set.
required: boolean (optional) - value for whether a value is required or not for the property. If set a default must be set.
placeholder: string (optional, text/number types only) - value for the HTML placeholder attribute of the control.
prefix: string (optional, text/number types only) - if set, prepends an uneditable prefix on the inputted value.
suffix: string (optional, text/number types only) - if set, appends an uneditable prefix on the inputted value (e.g. "px" on a number input would yield an input that looks like
[____px]
.options: Array (required only for select, multiselect, checklist types) - Array for options for the dropdown control (used when type is select or multiselect). The value is what will be set on the attribute.
default: (optional) - The default value for the property.
Last updated