Combine custom & standard components (Alpha)
This feature is currently in its Alpha stage of development.
As an early version, it may not include all planned functionalities and is subject to significant changes based on ongoing development and user feedback.
In this phase, the feature may contain bugs or behave unpredictably.
Jigx recommends using standard, fully supported components until this feature has been fully tested and refined.
We encourage you to provide feedback and report any issues to help us improve and refine the feature for future releases.
Combining Custom components (Alpha) with Standard components enables the creation of advanced functionality and rich user interfaces. Standard components, such as stepper , progress-bar , and countdown , provide a reliable foundation for common interactions, ensuring consistency and usability. By integrating custom components and tailored elements designed to meet specific requirements, you can extend this functionality to create dynamic features like interactive menus, tabbed navigation, and toggles with unique behaviors. This blend allows for a balance between efficiency and creativity, enabling apps to stand out with innovative designs while maintaining intuitive user experiences.
This approach encourages modular development, fostering scalability and adaptability, whether for small projects or enterprise-grade applications.
Here are code examples to illustrate combining custom and standard components to build advanced features.
Considerations
When using
component.imagein a custom component, theheightproperty must be specified as part of thesizeproperty. Otherwise, validation errors occur, see below:
# Correct YAML snippet for using the height property in the image component,
# when used in a custom component.
- type: component.image
options:
size:
height: 196
source:
uri: https://images# Incorrect YAML snippet for using the height property in the image component,
# when used in a custom component.
- type: component.image
options:
height: 196
source:
uri: https://images Example and code samples
The examples use a set of custom components called sections. The sections are for titles, spacing, and context. The sections code is available on GitHub.
Countdown
In this example, the first component.countdown is a standard component and the following four are custom components. Here, the component.countdown is configured in a component.card with color.
Example:
Progress Bar
More examples of customized progress bars are available on GitHub:
Ratings
This example demonstrates how you can create your own component using the custom components. Here various rating components are created by configuring the component.view and component.text.
Example:
Sections
This example demonstrates how you can create one custom component and reuse it multiple times, in this instance, in the same jig. We use inputs to show different data and elements in each reuse of the custom component. Here a standard component.avatar is combined with component.view, component.text and component.icon.
Example:
More examples of customized sections are available on GitHub:
Stepper
This example demonstrates how you can create one custom component and reuse it multiple times, in this instance in the two different jigs. We use inputs to show the number of steps and current steps in each reuse of the custom component. Here a stepper component is created by configuring the component.view.
Example:
More examples of customized sections are available on GitHub:
Tabs
This example demonstrates how you can create custom components and reuse them multiple times. We use inputs to show the tab value, name, indicator and alignment in each reuse of the custom component. Here tab components are created by configuring the component.view. Additionally, we show how to reference a custom component inside a standard component.list-item.
Example:
Tags
This example demonstrates how you can create tags in a custom component. We use inputs in the custom component to show the tag color and title. Here a tab component is created by configuring the component.view and component.text. Additionally, we show you how to reference a custom component inside a standard component.list, and use a second custom component to create an action allowing you to tap a link at the top to add new tag.
Example:
Toggles
This example demonstrates how you can create a custom component providing the functionality to toggle. We use inputs to determine the toggle name, highlighting and value. Here a toggle component is created by configuring the component.view and component.text. Additionally, we show you how to reference a custom component inside a standard component.list. The custom component is configured with the onPress event to trigger an action when the toggle is pressed.
Example:
Last updated
Was this helpful?