Image
Overview
Add an image to the view.
Component Properties
Dimensions — The placement on the canvas (X and Y) and the size (width and height) of the component.
To move a component freely, the View Property tab must have the Free Positioning option checked. |
Data
Source — Select the source image. The source is configured as an input on the View Properties tab.
Custom Value — If no source image is selected, you can load an image from an external source via an URL.
Default Image — Select the default image, uploaded via the Media view.
Press To View — Enlarge the image should be when it’s touched.
On Load Start — Select event when the image starts loading.
On Load End — Select event when the image is finished loading.
On Press — Select event when the image is pressed, short.
On Long Press — Select event when the image is pressed, long.
On Press In — Select event when the image is pressed in.
On Press Out — Select event when the image is released.
On Focus — Select event when the image gets focus.
On Blur — Select event when the image loses focus
Hide Component — The image can be hidden by applying a rule on a certain event.
Accessibility
Accessibility Label — Interface Accessibility label.
Accessibility Hint — Interface Accessibility hint.
Accessibility Role — Select an accessibility role, a function, for the component, to support disabled users.
Styling
Override — Override the currently selected style.
Image Resize Mode — Select how the image will act when it is resized.
Background Color — Sets the background color of the component.
Background Image — Select an image as the component’s background.
Background Size — Select if the image should cover the component’s background, be centered, repeated or stretched.
Component Width — The width of the component inside the container (the component’s borders).
Component Height — The height of the component inside the container (the component’s borders)
Flex Direction — Select the main axis where flex items will be placed, for instance horizontal or vertical (along a row or in a column).
Justify Content — Select how flex items will be placed in relation to each other, for instance towards the start of the flex direction, or with space between.
Align Content — Select how flex items will be placed in relation to the components border.
Align Items — Select how flex items will be placed in relation to the flex direction.
Border Top Color — The color of the component’s top border.
Border Top Width — The width of the component’s top border.
Border Bottom Color — The color of the component’s bottom border.
Border Bottom Width — The width of the component’s bottom border.
Border Left Color — The color of the component’s left border.
Border Left Width — The width of the component’s left border.
Border Right Color — The color of the component’s right border.
Border Right Width — The width of the component’s right border.
Border Top Left Radius — Sets the rounding of the top left corner.
Border Bottom Left Radius — Sets the rounding of the bottom left corner.
Border Top Right Radius — Sets the rounding of the top right corner.
Border Bottom Right Radius — Sets the rounding of the bottom right corner.
Border Radius (All) — Sets the rounding of all corners.
Border Style — Sets the style, solid, dotted or dashed, of the component’s border.
Shadow — Adds a shadow to the component’s borders.
Opacity — Sets the opacity of the component.
Component Padding — Sets the padding, top, bottom, left, right of the component inside the container (the component’s borders).
Component Container Padding — Sets the padding, top, bottom, left, right of the component container (the component’s borders).