Arrow

The Arrow Component allows you to easily add arrows to your project. The ability to change the rotation and curve of the arrow, allows you to find the prefect fit.


Setting up an Arrow

  • The Arrow Component comes with a default preset look. You can change this by adjusting any of the properties, including the image.
  • Make sure the tint is different from your background in order to see it. The Arrow Component’s default color is light grey so if your page background color is also light grey it may not look visible to start with.
  • The image below shows an arrow with the curve property set to -1.
  • The image below shows an arrow with the rotate property set to 90.

Properties for Arrow Component

ImageThis is the image the arrow is based on.
Stroke WidthThis adjusts the size of arrow.
Left SliceThe percentage of the overall image, from the left, that is used to make the arrow head.
Right SliceThe percentage of the overall image, from the right, that is used to make the arrow head.
RotateThe angle (-180 to 180) to set the arrow. The default is 0.
CurveThe amount of curve (-1 to 1) to give the arrow. The default is 0.
Arrow TintThe color to apply on top of the arrow image. The default is light grey (#eaeaea).The tint works for white images, or white images with a black outline. The black will stay black, and the white will take on the tint color. If the image has color, the tint will mix the colors. For example, a yellow image, tinted blue, will turn green.
Opacity┬áThis is the alpha channel and dictates how ‘see through’ the arrow appears.

 

Events that can Trigger an Action on the Arrow Component

 

On PressAction occurs when you touch or click within the rectangle bounding box of the Arrow Component.