Design and display text with any style, color, size and alignment.
Design headings, labels and text blocks in an instant. This component delivers a quick way to create content. You just type in your text in the Text Editor and it will display onscreen with all the properties you set.
Umajin App Creator has a Styles Inspector/Editor that enables you to set styles across an App: Link Text Styles
Using the Text Component
- The Text component enables you to type in static text rather than text driven from your Dashboard database. You can type your labels, body text, explanations or whatever text you want into the expanded Text editor.
- By default, the text is white. You can change the text color under Text Style in the Properties or add a background image component first, in order to see your text.
- The fonts available for selection will be those you have imported into the ‘fonts’ folder in your App’s ‘Resources Folder’.
- Using the properties under ‘Appearance’ and ‘Text Style’ in the ‘Properties Inspector’ you can re-size, align, space and change the look and presentation of your text. These properties are all described in the Properties section below.
- Font rendering is automatic so it remains pixel perfect when re-sizing across devices.
Properties for Text Component
|Name||When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.|
|Position and Size||Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create text boxes that will be well positioned across devices.|
|Appearance||Set content and placement/arrangement of text.|
|Text||Press the edit (A) button to enter text in the Text Editor or double click the text box in the workspace.|
|Resize Type||Options are:
Millimeters – Sets the size of the font to a specific millimeter measurement.The font will stay the same size regardless of the device size.
Scale with screen – The font size is set to be proportional to the size of the device screen. Works like a percentage.
|Rich Text||Checkbox – if checked will display text in Rich Text Format.|
|Multiline||Checkbox – if checked will display text over several lines.|
|Ellipsis||Checkbox – This checkbox will only work if you turn off the ‘Resize text to box’ option. When this is off and there is no space for the text an ellipsis (three dots) is used at the end of the text to indicate there is more text which cannot be shown. This is useful for summary information and typically you would link to the full content.|
|Center vertical||Centers text vertically in box.|
|Resize to Content||When the box is checked the text will reflow vertically to fit in all the original content.|
|Line Spacing||Adjusts spacing between lines of text in lines of text where 1 is normal. (Range .5 to 2)|
|Text Style||Set style and appearance of your text using the Styles Inspector. The Styles Inspector is accessible through the Edit Style ‘pencil’ icon under the Text Style Properties and from the Files Menu ‘Styles’.|
|Base Style||The dropdown will display all the styles you have set in the Styles Inspector. Whichever style you have selected will populate the properties below. If you alter any of the properties below for a specific use on a page, then clicking the Refresh arrow will revert the style back to its original state.
Create Style – opens the Styles Inspector so you can create a new style. The new style will be added to the dropdown.
Organize Style – opens the Styles Inspector.
|Font size||Set font size using plus and minus buttons.|
|Font Color||The color preview shows the color picker. Move around the color pad to select your color you want. It displays with its web hex code at the top and shows the RGB values below. If you know the hex code or RGB numbers you can type it directly into the boxes.|
|Opacity||Set how opaque the text will display on a scale of 0 to 100, with 0 being transparent.|
|Font||The drop down displays all the fonts you have in your project. Select the font you want to use.|
|Alignment||Set the alignment of the text.|
|Tracking||Use this property to adjust the distance between your text characters.|
|Preset||A Preset is a pre-determined set of properties and files for a component. You can have a Predefined Preset (Umajin created) or a Custom Preset (custom designed by you). Where the component has a Predefined Preset it will automatically be loaded into your app as the default when you insert that component.
The ‘LOAD’ button opens the Preset Selector, which has tabs for Predefined and Custom, so you can choose which preset to load for your component.
Create your own Preset by building your assets, putting them in your Image folder and then selecting them in the Properties panel. The ’SAVE’ button will enable you to name and save your preset under the Custom tab.