interactive-image-item
In the section, a brief introduction was provided to interactive images.
We know that an interactive image is an image with clickable links that can be used to convey information visually instead of via text.
The interactive-image-item can be set in various ways:
- You can use x and y coordinates and determine various points on the image
- You can specify different groups and determine the points that should be grouped together
- You can personalize the points by specifying icons or colors
- You can determine whether a specific point is active or inactive
Some properties are common to all components, see Common component properties for a list and their configuration options.
The core structure includes: id, title, and percentageCoordinates(x and y coordinates)
Other option:
color and icon - This allows you to set a specific color and icon for different states (e.g. when the point is selected)
style - There are styling sets:
- isActive
- isDisabled
groupId - This property allows you to add the item to the group (the groups are created inside the interactive-image component)
Actions:
onPress - The possibility to add any of the actions (please refer to the list of our Actions). This action(s) will be triggered as a reaction to the press event.
Restaurant table booking example
The example indicates how this can indicate tables within a restaurant that are available for booking.
Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.
Datasource: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.
Hot seat and meeting room booking example
The example indicates how this can be used to indicate hot seats and meeting rooms at an office that can be booked.
Examples:
See the full example using static data in GitHub.
