Veritran Docs

Color

Border color. To set the color, click the Hex field and type the hex color code or click the square icon to open the color picker. In the color picker, select a color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code, respectively.

Width

Border width. Type a number to set the width. To change the unit of measurement, click the ellipsis (three dots) and select an option from the drop-down menu.

Flat

Click the Flat radio button to set a single color for the component's background. To set the color, click the field and type a hex code or click the rounded-edges square icon to open the color picker. In the color picker, select a color or enter the hexa or rgba color code.

Gradient

Click the Gradient radio button to set a color gradient for the component's background. Click each of the square icons to open the color picker. In the color picker, select the color or click HEX or RGB, then click the field to the left and type a HEXA or RGBA color code to form the color gradient. Click Switch direction to invert the order of the colors selected for the gradient. Click Change to horizontal direction or Change to vertical direction to define the gradient's direction in horizontal or vertical position, respectively.

Background Image

Click the Image checkbox to add an image to the component's background. You can use a background image with both the Flat and Gradient background options. Click the Background image field and type the name of the background image, or click the upload icon to open the image picker. Select one of the images from the list or use the search bar to find an image by name.

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

Padding Top

Space between the component's top border and the component's content. Enter a value. Then, click the arrow located to the right of the field and select a unit of measurement from the drop-down menu.

Padding Bottom

Space between the component's bottom border and the component's content. Enter a value. Then, click the arrow located to the right of the field and select a unit of measurement from the drop-down menu.