Image

Overview

Add an image to the view.

th

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).