Composer has a powerful, web-based editor for creating your own UI components.
To create a custom UI component, you can click on the "Create new" button under the Components menu on the left side of the Interface Builder.
Creating a custom UI component
The editor that opens up lets you define the following for your new component.
Component name, as it appears on the Components menu
If checked, this component can be made to repeat based on a data collection – used for lists, image galleries and such.
Component HTML to render. Properties are inserted via Underscore templates. Styling can be added via <style> tags (separate CSS editing coming soon).
Components can change what they show dynamically via Properties. Properties have the following settings.
Property name, displayed in the right-hand menu when configuring the component.
Property type. Can be
Default value for the component. This will get overriden by the user with their own value once the component is added on a page.
If checked, this value must be entered when adding the component.
Available data reference types that can be used to dynamically determine the value for this component. Read more about data references in the Data guide.
New properites can be created with the New property button.
You can also clone an existing component and use it as a base for your own component. This happens by clicking on the clone button on the right side of a component in the component menu.