Text and array properties groups coordinate CSS custom properties and data items for text editing, array management, and item display.
Unlike the other two categories, which operate on one property type at a time, text and array groups can pull from both cssCustomProperties and data in the same group.
Groups text-related CSS custom properties and optionally data items into a single text-editing widget in the design panel. The editor already auto-groups text properties by type, so this group is most useful when you have multiple text elements and need to distinguish which font, color, and size belongs to which element.
Note: Specify these additional configurations under a text field in your display group.
CSS custom property key for the font shorthand.
CSS custom property key for font-style.
CSS custom property key for font-variant.
CSS custom property key for font-weight.
CSS custom property key for font-size.
CSS custom property key for line-height.
CSS custom property key for font-family.
CSS custom property key for color.
CSS custom property key for letter-spacing.
CSS custom property key for text-align.
CSS custom property key for text-transform.
CSS custom property key for text-shadow.
CSS custom property key for text-decoration-line.
CSS custom property key for writing-mode.
Data item key for direction.
Data item key for accessibility.
Creates the Manage Items panel in the editor, where Wix users can add, remove, and reorder arrayItems.
Use selectedItemIndex to connect panel item selection to your component. When a Wix user clicks an item in the Manage Items panel, the editor passes that item's index to your component through the prop you specify in selectedItemIndex. Your component can use this value to visually reflect the selected item in the editor.
Note: Specify these additional configurations under an arrayItems field in your display group.
Key of a data item with dataType: arrayItems.
Key of the data item your component uses to receive the currently selected item's index from the Manage Items panel.
Controls how each item appears in the Manage Items panel list. You assign roles to your array item's data properties so the editor knows what to show as the main title, secondary text, and thumbnail for each item.
Note: Specify these additional configurations under a listItem field in your display group.
Key of a data item with dataType: arrayItems.
Key of a text data item inside the array used as the main title for each item in the panel list.
Key of a text, link, or webUrl data item inside the array used as secondary text below the title.
Key of a vectorArt or image data item inside the array used as the item's thumbnail in the panel list.
Combine font, color, and text-related CSS and data properties into a single text control.
Use arrayItems to open the Manage Items panel and connect item selection to the component. Use listItem to define what each item shows in the panel list.