Text

Overview

Add a text display to the view.

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.

Text — The text to be displayed.

On Press — Select event when the text display is pressed, short.

On Long Press — Select event when the text display is pressed, long.

On Press In — Select event when the text display is pressed in.

On Press Out — Select event when the text display is released.

On Focus — Select event when the text display gets focus.

On Blur — Select event when the text display loses focus

Hide Component — The text display 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.

Adjust Font Size Automatically — Adjust the font size automatically when the container is resized.

Ellipsize Mode — Select how to handle ellipsis if the text doesn’t fit the container.

Maximum Amount of Lines — Sets the maximum number of lines in the text display.

Allow users to select text — Allow user to select and copy text in the text display.

Text Selection Color — Sets the color of the selected text.

Flex Direction Text — Select the main axis where flex items inside the container, will be placed, for instance horizontal or vertical (along a row or in a column).

Justify Content Text — Select how flex items inside the container, will be placed in relation to each other, for instance towards the start of the flex direction, or with space between.

Align Content Text — Select how flex items inside the container, will be placed in relation to the components border.

Align Items Text — Select how flex items inside the container, will be placed in relation to the flex direction.

Text Color — Select the color of the component’s text.

Text Font — Select the font of the component’s text.

Text Size — Select the font size of the component’s text.

Text Style — Select normal or italic text.

Text Weight — Select normal or bold text.

Text Align — Sets the alignment of the text, left, center or right.

Text Decoration — Adds underline or strike through decoration to the text.

Letter Spacing — Sets the space between letters.

Text Transform — Select if the text should be set to uppercase, lowercase or begin with a capital letter.

Border Color — The color of the component’s border.

Border Style — Sets the style, solid, dotted or dashed, of the component’s border.

Border Width — The width of the component’s border.

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