Image Component


Properties

alternateText
  A written description of what the image looks like.
Data type: string
Designer Writable true <image name="imageName" alternateText="Test alternateText">
Code Writeable true imageName.alternateText = "Test alternateText"
Code Readable false

animation
  This is a limited form of animation that can attach a small number of motion types to images. The allowable motions are ScrollRightSlow, ScrollRight, ScrollRightFast, ScrollLeftSlow, ScrollLeft, ScrollLeftFast, and Stop.
Data type: string
Designer Writable false
Code Writeable true imageName.animation = "ScrollRightSlow"
Code Readable false

clickable
  Specifies whether the image should be clickable or not.
Data type: boolean
Designer Writable true <image name="imageName" clickable="true">
Code Writeable true imageName.clickable = true
Code Readable true let variable = imageName.clickable

height
  Specifies the Image's vertical height, measured in pixels.
Data type: number
Designer Writable true <image name="imageName" height="60">
Code Writeable true imageName.height = 60
Code Readable true let variable = imageName.height

heightPercent
  Specifies the Image's vertical height as a percentage of the Screen's Height.
Data type: number
Designer Writable false
Code Writeable true imageName.heightPercent = "20%"
Code Readable false

picture
  Specifies the path of the Image's Picture.
Data type: string
Designer Writable true <image name="imageName" picture="cat.png">
Code Writeable true imageName.picture = "cat.png"
Code Readable true let variable = imageName.picture

rotationAngle
  The angle at which the image picture appears rotated. This rotation does not appear on the designer screen, only on the device.
Data type: number
Designer Writable true <image name="imageName" rotationAngle="45">
Code Writeable true imageName.rotationAngle = 45
Code Readable true let variable = imageName.rotationAngle

scalePictureToFit
  Specifies whether the image should be resized to match the size of the ImageView.
Data type: boolean
Designer Writable true <image name="imageName" scalePictureToFit="true">
Code Writeable true imageName.scalePictureToFit = true
Code Readable false

scaling
  This property determines how the picture scales according to the Height or Width of the Image. Scale proportionally (0) preserves the picture aspect ratio. Scale to fit (1) matches the Image area, even if the aspect ratio changes.
Data type: number
Designer Writable false
Code Writeable true imageName.scaling = 1
Code Readable true let variable = imageName.scaling

visible
  Specifies whether the Image should be visible on the screen. Value is true if the Image is showing and false if hidden.
Data type: boolean
Designer Writable true <image name="imageName" visible="true">
Code Writeable true imageName.visible = true
Code Readable true let variable = imageName.visible

width
  Specifies the horizontal width of the Image, measured in pixels.
Data type: number
Designer Writable true <image name="imageName" width="72">
Code Writeable true imageName.width = 72
Code Readable true let variable = imageName.width

widthPercent
  Specifies the horizontal width of the Image as a percentage of the Screen's Width.
Data type: number
Designer Writable false
Code Writeable true imageName.widthPercent = "18%"
Code Readable false

class
  The styling class of the the component
Data type: string
Designer Writable true <image name="imageName" class="Test class">
Code Writeable false
Code Readable false

id
  The styling id of the the component
Data type: string
Designer Writable true <image name="imageName" id="Test id">
Code Writeable false
Code Readable false

name
  The name of the component that will be used to refer to it in code.
Data type: string
Designer Writable true <image name="imageName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
addEventListener Method used to create event listeners.
See Events below for samples.
eventName string
eventCallbackFunction callback

Events

Event name Description Parameters
click An event that occurs when an image is clicked.
imageName.addEventListener(
    "click",
    function () {
        //Your code here
    }
)