Custom components (Alpha)
Custom components extend the standard set of components in to provide additional UI capabilities and features. To understand what custom components are, when and why you would use them, see Custom Components (Alpha).
- Creating custom components (Alpha) explains where and how to create the components and how to reuse them in a .
- Combine custom & standard components (Alpha) to create your own customized components and templates.
- offers a variety of Templates (Alpha) ready to use in your app, making development faster and easier. Select the template you want to use, copy the code from GitHub, and customize it to meet your needs.
- The components that fall into the custom component category are:
In in the components folder, create a new jigx file, e.g., custom-button.jigx.
Select the type: component.default. All custom components require this type.
Under the children: property, use IntelliSence (Ctrl+space) to see the list of available components. Select the components, e.g., type: component.button.
Under the options: properties, create a space and use ctrl+space to open the IntelliSense popup.
You can select the styling properties from the list shown.
Configure the other properties provided in the code snippet.
Open the where you want to use the custom component and reference component.custom-component. Use the componentId property to reference the name of the custom component file, e.g., componentId: custom-button.
Test the on a mobile device to ensure the button is rendering correctly.
- When using component.image in a custom component, the height property must be specified as part of the size property, otherwise validation errors occur, see below:
