Veritran Docs

Visible

Attribute that defines whether the component is visible in the app. Click the arrow and choose an option from the drop-down menu. Select true so that the component is visible in the app or false so that it is not visible.

Important For Accessibility

Attribute that defines whether the screen reader reads or ignores the value defined in the Accessibility Text attribute of the component. Click the arrow and select an option from the drop-down menu. Choose true so that the screen reader reads the component or false so that the screen reader does not read the component. The default value is false.

Accessibility Text

Alternative text. Add a short text to describe the component to users who may not be able to see it. The text will be read by iOS Voice Over or Android Talk Back. You can also add the accessibility text to the translations dictionary or select an existing translation if there are languages selected in your context settings.

Accessibility Order

Attribute that tells the screen reader the order in which it must read the components. To configure it, click the field and enter a number to define the order. For example, if this component should be read in third place, enter the value 3. If you don't configure a custom order, components are read from top to bottom and left to right of the screen.

Position Type

Click the arrow and select a type from the drop-down menu. Refer to the table below to learn more about the options available.

Scale Type

Attribute that defines the behavior of the scale applied to the component's limits. Click the arrow and select an option from the drop-down menu. Refer to the table below to learn more about the options available.

Z-Index

Property that defines the components' position order. If several components overlap, components with a higher Z-index will be placed over those with a lower index. This field is filled in automatically.

Shadow offset-x

Enter a value for the shadow with regard to the X (horizontal) axis, which considers the center of the component as starting point. If the value is a negative number, the shadow will point to the left. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu.

Shadow offset-y

Enter a value for the shadow with regard to the Y (vertical) axis, which considers the center of the component as starting point. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu.

Shadow Blur Radius

Enter a value for the width of the shadow radius. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu.

Shadow Color

To set the shadow color, click the Shadow Color field and type a hexa color code or click the rounded-edges square icon to open the color picker located to the left (rounded-edges square icon). In the color picker, select a color or enter the hexa or rgba color code.

Animation

JSON file exported through the BodyMovin plug-in that includes the animation that the component will execute.

States

JSON file that applies additional parameters to the animation by dividing it in states.

Speed

Speed at which the animation is executed. Click the field and define the speed scale using numbers (including decimals), where the value 1 is the normal speed of the animation. For example, if you enter 2 as the value, the speed will be two times the normal speed, or if you enter 0.5 the speed will be half the normal speed.

Initial State

Defines the state with which the animation starts.

Loop

Defines whether the animation video is played in loop. Click the arrow and choose an option from the drop-down menu. Select true so that the animation is played in loop or false so it is not played in loop.

Repeat Mode

Defines the behavior of the animation loop. Click the arrow and choose an option from the drop-down menu. Select Restart so that the animation is executed from the start every time it is repeated or select Reverse so that the animation is executed in reverse every time it is repeated.

Src

Id of the video to be displayed in the component. To set the video, click the field and type the name of the video, or click the magnifying glass icon to open the file picker. Then, select a video from the list, or use the search bar to find a video by name and click it.