Back

addText

JS Py
Hello World
Content:
- Examples
- Properties
- Methods

In mobile UI design, it refers to the style, arrangement, and appearance of text.

txt = ui.addText( parent, text, options?, width?, height? ) → ui object: Text

Here are the methods available for Text Component

Examples

Example - Basic text control

class Main extends App
{
    onStart()
    {
        // Create a full screen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        var t = "This is the sample text to be displayed."

        // Add a text control to the main layout
        this.txt = ui.addText(this.main, t)

        // You can also add a callback handler when the text control is touch
        this.txt.setOnTouch( this.onTouch )
    }

    onTouch()
    {
        ui.showPopup( "You touched the text!" )
    }
}
class Main extends App
    onStart()
        # Create a full screen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        t = "This is the sample text to be displayed."

        # Add a text control to the main layout
        this.txt = ui.addText(this.main, t)

        # You can also add a callback handler when the text control is touch
        this.txt.setOnTouch( this.onTouch )

    onTouch()
        ui.showPopup( "You touched the text!" )
Copy All       Run      

Example - Heading variants

class Main extends App
{
    onStart()
    {
        // Create a full screen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        var t = "Lorem ipsum dolor sit amet, consectetur"

        // Heading ranges from H1 to H6

        this.h1 = ui.addText( this.main, "Heading 1", "H1" )

        this.h2 = ui.addText( this.main, "Heading 2", "H2" )

        this.h3 = ui.addText( this.main, "Heading 3", "H3" )

        this.h4 = ui.addText( this.main, "Heading 4", "H4" )

        this.h5 = ui.addText( this.main, "Heading 5", "H5" )

        this.h6 = ui.addText( this.main, "Heading 6", "H6" )
    }
}
class Main extends App
    onStart()
        # Create a full screen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        t = "Lorem ipsum dolor sit amet, consectetur"

        # Heading ranges from H1 to H6

        this.h1 = ui.addText( this.main, "Heading 1", "H1" )

        this.h2 = ui.addText( this.main, "Heading 2", "H2" )

        this.h3 = ui.addText( this.main, "Heading 3", "H3" )

        this.h4 = ui.addText( this.main, "Heading 4", "H4" )

        this.h5 = ui.addText( this.main, "Heading 5", "H5" )

        this.h6 = ui.addText( this.main, "Heading 6", "H6" )
Copy All       Run      

Example - Other variants

class Main extends App
{
    onStart()
    {
        // Create a full screen layout.
        this.main = ui.addLayout( "main", "Linear", "VCenter", 1, 1 )

        var t = "Lorem ipsum dolor sit amet, consectetur"

        this.text = ui.addText( this.main, t, "body1" )

        this.text = ui.addText( this.main, t, "body2" )

        this.text = ui.addText( this.main, t, "subtitle1" )

        this.text = ui.addText( this.main, t, "subtitle2" )

        this.text = ui.addText( this.main, t, "overline" )

        this.text = ui.addText( this.main, t, "button" )

        this.text = ui.addText( this.main, t, "caption" )
    }
}
class Main extends App
    onStart()
        # Create a full screen layout.
        this.main = ui.addLayout( "main", "Linear", "VCenter", 1, 1 )

        t = "Lorem ipsum dolor sit amet, consectetur"

        this.text = ui.addText( this.main, t, "body1" )

        this.text = ui.addText( this.main, t, "body2" )

        this.text = ui.addText( this.main, t, "subtitle1" )

        this.text = ui.addText( this.main, t, "subtitle2" )

        this.text = ui.addText( this.main, t, "overline" )

        this.text = ui.addText( this.main, t, "button" )

        this.text = ui.addText( this.main, t, "caption" )
Copy All       Run      

Example - Alignments and colors

class Main extends App
{
    onStart()
    {
        // Create a full screen layout.
        this.main = ui.addLayout( "main", "Linear", "VCenter,FillXY")
        this.main.setChildMargins(0, 0.05)

        var t = "Lorem ipsum dolor sit amet, consectetur adipiscing elit"

        // Default is left
        this.txt1 = ui.addText( this.main, t, "body1,Left", 0.9 )
        this.txt1.backColor = "#e0e0e0"

        // Center and color primary
        this.txt2 = ui.addText( this.main, t, "body1,Center,Primary", 0.9 )
        this.txt2.backColor = "#e0e0e0"

        // Right and color secondary
        this.txt3 = ui.addText( this.main, t, "body1,Right,Secondary", 0.9)
        this.txt3.backColor = "#e0e0e0"

        // Bottom, Center with a textSecondary color
        this.txt4 = ui.addText( this.main, t, "body1,Center,Bottom,TextSecondary", 0.9, 0.1)
        this.txt4.backColor = "#e0e0e0"
    }
}
class Main extends App
    onStart()
        # Create a full screen layout.
        this.main = ui.addLayout( "main", "Linear", "VCenter,FillXY")
        this.main.setChildMargins(0, 0.05)

        t = "Lorem ipsum dolor sit amet, consectetur adipiscing elit"

        # Default is left
        this.txt1 = ui.addText( this.main, t, "body1,Left", 0.9 )
        this.txt1.backColor = "#e0e0e0"

        # Center and color primary
        this.txt2 = ui.addText( this.main, t, "body1,Center,Primary", 0.9 )
        this.txt2.backColor = "#e0e0e0"

        # Right and color secondary
        this.txt3 = ui.addText( this.main, t, "body1,Right,Secondary", 0.9)
        this.txt3.backColor = "#e0e0e0"

        # Bottom, Center with a textSecondary color
        this.txt4 = ui.addText( this.main, t, "body1,Center,Bottom,TextSecondary", 0.9, 0.1)
        this.txt4.backColor = "#e0e0e0"
Copy All       Run      

Example - Icons

class Main extends App
{
    onStart()
    {
        // Create a full screen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.setChildMargins(0, 0.05)

        // Add a settings icon
        this.txt1 = ui.addText(this.main, "settings", "Icon")
        this.txt1.setOnTouch( this.onTouch )

        // Add a camera icon
        ui.addText(this.main, "add_a_photo", "Icon,TextSecondary")

        // Add a heart icon
        ui.addText(this.main, "favorite", "Icon,Secondary")

        // Add an android icon
        ui.addText(this.main, "android", "Icon,Primary")
    }

    onTouch()
    {
        ui.showPopup( "You touch the icon!" )
    }
}
class Main extends App
    onStart()
        # Create a full screen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.setChildMargins(0, 0.05)

        # Add a settings icon
        this.txt1 = ui.addText(this.main, "settings", "Icon")
        this.txt1.setOnTouch( this.onTouch )

        # Add a camera icon
        ui.addText(this.main, "add_a_photo", "Icon,TextSecondary")

        # Add a heart icon
        ui.addText(this.main, "favorite", "Icon,Secondary")

        # Add an android icon
        ui.addText(this.main, "android", "Icon,Primary")

    onTouch()
        ui.showPopup( "You touch the icon!" )
Copy All       Run      

Example - Html formatted text

class Main extends App
{
    onStart()
    {
        // Create a full screen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Html formatted string
        var t = 'This text is formatted as html. <h3 style="color:green;">This is a heading with color.</h3>'
        t += 'You can also add <i>italize text</i> as well as <span style="background-color:yellow;">text with styles</span>.'

        // Add text control to the main layout by passing `Html` option
        this.txt = ui.addText(this.main, t, "html")
    }
}
class Main extends App
    onStart()
        # Create a full screen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        # Html formatted string
        t = 'This text is formatted as html. <h3 style="color:green;">This is a heading with color.</h3>'
        t += 'You can also add <i>italize text</i> as well as <span style="background-color:yellow;">text with styles</span>.'

        # Add text control to the main layout by passing `Html` option
        this.txt = ui.addText(this.main, t, "html")
Copy All       Run      

Properties

The following properties are available on the Text object:

absHeight → Number
absLeft → Number
absTop → Number
absWidth → Number
alignment → String
backColor → String
backImage → String
bold → Boolean
border → Number
borderColor → String
borderStyle → String
color → String
cornerRadius → Number
disabled → Boolean
el → Object
ellipsize → String
elStyle → String
fontFile → String
height → Number
isVisible → Boolean
italic → Boolean
left → Number
margins → List
opacity → Number
options → String
padding → List
parent → Object
position → Object
rotation → Number
text → String
textColor → String
textSize → Number
textStyle → String
top → Number
type → String
underline → Boolean
variant → String
verticalAlignment → String
visibility → String
width → Number

Methods

The following methods are available on the Text object:

animate( anim, duration )
bringForward( zIndex )
destroy()
getHtml() → String
getPosition( options ) → Object
gone()
hide()
sendBackward( zIndex )
setBorder( left?, top?, right?, bottom?, clr?, style? )
setCornerRadius( tl?, tr?, br?, bl?, mode? )
setHtml( html )
setMargins( left?, top?, right?, bottom?, mode? )
setOnContextMenu( callback )
setOnLongTouch( callback )
setOnTouch( callback )
setPadding( left?, top?, right?, bottom?, mode? )
setPosition( left, top, mode )
setScale( x, y )
setSize( width, height, mode )
setTextShadow( radius, dx, dy, color )
show()
Number: Fraction of the parent width `[0-1]`.
Number: Fraction of the parent height `[0-1]`.
Number: The time in milliseconds.
Number: The z-index. A negative value behaves like `sendBackward` method.
Number: The z-index. A positve value behaves like `bringForward` method.
Number: Border-left thickness in pixels.
Number: Border-top thickness in pixels.
Number: Border-right thickness in pixels.
Number: Border-bottom thickness in pixels.
Number: Top-Left border radius.
Number: Top-Right border radius.
Number: Bottom-Right border radius.
Number: Bottom-Left border radius.
Number: Left margin. You can also pass string e.g. `12rem`
Number: Top margin. You can also pass string e.g. `12rem`
Number: Right margin. You can also pass string e.g. `12rem`
Number: Bottom margin. You can also pass string e.g. `12rem`
Number: Fraction of the component width.
Number: Fraction of the component height. [0-1]
Number: Fraction of the component width. [0-1]
Number: Fraction of the parent width. [0-1]
Number: Fraction of the parent height. [0-1]
Number: The x-scale of the component.Values less than `0` is smaller than the normal. While values greater than `1` is greater than the normal.
Number: The y-scale of the component. Values less than `1` is smaller than the normal. While vaues greater than `1` is greater than the normal.
Number: The radius in pixels
Number: X-offset of the shadow
Number: Y-offset of the shadow
String: “The text to be displayed on the text control”
String: “A comma separated options.
Variants: `H1`”, “ `H2`”, “ `H3`”, “ `H4`”, “ `H5`”, “ `H6`”, “ `body1`”, “ `body2`”, “ `overline`”, “ `subtitle1`”, “ `subtitle2`”, “ `button`”, “ `caption`
Lines: `Singleline`”, “ `Multiline`
Alignment: `Left`”, “ `Center`”, “ `Right`”, “ `Justify`
Theme Color: `Primary`”, “ `Secondary`”, “ `TextPrimary`”, “ `TextSecondary`”, “ `Error`
Format: `Html`”, “ `Icon`”, “ `Italize`”, “ `Monospace`”, “ `Bold`”, “ `Underline`
Utils: `Touchable`”
String: “The type of animation. Here are the available values
`bounce`”, “ `flash`”, “ `pulse`”, “ `rubberBand`”, “ `shakeX`”, “ `shakeY`”, “ `headShake`”, “ `swing`”, “ `tada`”, “ `wobble`”, “ `jello`”, “ `heartBeat`”, “
Back Entrances: `backInDown`”, “ `backInLeft`”, “ `backInRight`”, “ `backInUp`
Back Exits: `backOutDown`”, “ `backOutLeft`”, “ `backOutRight`”, “ `backOutUp`
Bouncing Entrances: `bounceIn`”, “ `bounceInDown`”, “ `bounceInLeft`”, “ `bounceInRight`”, “ `bounceInUp`
Bouncing exits: `bounceOut`”, “ `bounceOutDown`”, “ `bounceOutLeft`”, “ `bounceOutRight`”, “ `bounceOutUp`
Fading entrances: `fadeIn`”, “ `fadeInDown`”, “ `fadeInDownBig`”, “ `fadeInLeft`”, “ `fadeInLeftBig`”, “ `fadeInRight`”, “ `fadeInRightBig`”, “ `fadeInUp`”, “ `fadeInUpBig`”, “ `fadeInTopLeft`”, “ `fadeInTopRight`”, “ `fadeInBottomLeft`”, “ `fadeInBottomRight`
Fading exits: `fadeOut`”, “ `fadeOutDown`”, “ `fadeOutDownBig`”, “ `fadeOutLeft`”, “ `fadeOutLeftBig`”, “ `fadeOutRight`”, “ `fadeOutRightBig`”, “ `fadeOutUp`”, “ `fadeOutUpBig`”, “ `fadeOutTopLeft`”, “ `fadeOutTopRight`”, “ `fadeOutBottomRight`”, “ `fadeOutBottomLeft`
Flippers: `flip`”, “ `flipInX`”, “ `flipInY`”, “ `flipOutX`”, “ `flipOutY`
Lightspeed: `lightSpeedInRight`”, “ `lightSpeedInLeft`”, “ `lightSpeedOutRight`”, “ `lightSpeedOutLeft`
Rotating Entrances: `rotateIn`”, “ `rotateInDownLeft`”, “ `rotateInDownRight`”, “ `rotateInUpLeft`”, “ `rotateInUpRight`
Rotating Exits: `rotateOut`”, “ `rotateOutDownLeft`”, “ `rotateOutDownRight`”, “ `rotateOutUpLeft`”, “ `rotateOutUpRight`
Specials: `hinge`”, “ `jackInTheBox`”, “ `rollIn`”, “ `rollOut`
Zooming Entrances: `zoomIn`”, “ `zoomInDown`”, “ `zoomInLeft`”, “ `zoomInRight`”, “ `zoomInUp`
Zooming Exits: `zoomOut`”, “ `zoomOutDown`”, “ `zoomOutLeft`”, “ `zoomOutRight`”, “ `zoomOutUp`
Sliding Entrances: `slideInDown`”, “ `slideInLeft`”, “ `slideInRight`”, “ `slideInUp`
Sliding Exits: `slideOutDown`”, “ `slideOutLeft`”, “ `slideOutRight`”, “ `slideOutUp`”
String: “The mode of the measurements. Values can be `px` or `%`”
String: “Border color in hexadecimal format `#rrggbb`.”
String: “Border-styles. Values can be `dotted`”, “ `dashed`”, “ `solid`”, “ `double`”, “ `groove`”, “ `ridge`”, “ `inset` and `outset`. Default is `solid`”
String: “Unit of measurement. Values are `px` `rem` or `%`.”
String: “An html string”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimension.
`v` relative to viewport dimension.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimensions
`v` relative to viewport dimensions.”
String: “Unit of measurment. Can be "px"”, “ "rem"”, “ "%"”, “ "v" for viewport width/height or any css supported unit.”
String: “A hexadecimal color of the form `#rrggbb`”
Object: The layout control where to add the text control
Object: The pointer event object.
Object: The position of the touch event.
function( event )
function( pos )
txt.absHeight
Returns the absolute height of the control in pixels.
txt.absLeft
Returns the absolute distance of the control from the left in pixels.
txt.absTop
Returns the absolute distance of the control from the top in pixels.
txt.absWidth
Returns the absolute width of the control in pixels.
txt.alignment
Sets or returns the horizontal alignment of the text. Values can be Left Center Right or Justify.
txt.animate
Animate the component.
txt.backColor
A hexadecimal color of the form #rrggbb
txt.backImage
The path to your image file.
txt.bold
Sets or returns whether the text is bold or not.
txt.border
Sets or returns the border thickness in pixels.
txt.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
txt.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
txt.bringForward
Bring this component forward by a given z-index.
txt.color
Sets or returns the theme color of the text Primary or Secondary. You can also pass hexadecimal color of the form #rrggbb
txt.cornerRadius
Sets or returns the corner radius in pixels.
txt.destroy
Destroy the component.
txt.disabled
Sets or returns the disabled state of the control.
txt.el
Returns the html container element for the control.
txt.ellipsize
Sets or returns the ellipsis use when the text is truncated. Values can be Ellipsis End or Start
txt.elStyle
Sets the style of the html container element.
txt.fontFile
Sets or returns the relative path to the font-family use.
txt.getHtml
Returns the html text.
txt.getPosition
Returns the position of the component. The return object is of the form {left, top, right, bottom}
txt.gone
Destroy the component.
txt.height
Sets or returns the height of the control as a fraction of the parent control.
txt.hide
Hide the component.
txt.isVisible
Returns whether the control is visible or not.
txt.italic
Sets or returns whether the text is italized or not.
txt.left
Returns the distance of the control from the left.
txt.margins
Sets or returns the margin of the control. Works on controls with Linear parent only. You can also pass a number to set equal margins for all sides.
txt.opacity
Sets or returns the opacity of the control.
txt.options
Sets or returns the options of the control.
txt.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
txt.parent
Returns the parent layout control.
txt.position
Returns the position of the control. The returned object has left top right and bottom props.
txt.rotation
Sets or returns the angle of rotation in degrees.
txt.sendBackward
Bring this component backward by a given z-index.
txt.setBorder
Sets the border line for the component container.
txt.setCornerRadius
Sets the corner radius of the component.
txt.setHtml
Sets an html on the text control.
txt.setMargins
Sets the margin of the component.
txt.setOnContextMenu
Adds a callback function on right click.
txt.setOnLongTouch
Adds a callback handler for a long touch event. The touch timer is about 500 milliseconds.
txt.setOnTouch
Adds an event handler when the text component is touch.
txt.setPadding
Sets the padding of the component's container.
txt.setPosition
Sets the position of the component relative to its parent dimensions.
txt.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.
txt.setSize
Sets the size of the component.
txt.setTextShadow
Sets a shadow on the text in a text control.
txt.show
Show the component.
txt.text
Sets or returns the text.
txt.textColor
Sets or returns the color of the text.
txt.textSize
Sets or returns the size of the text within the control.
txt.textStyle
Sets or returns the style of the text. Values can be italic or normal.
txt.top
Returns the distance of the control from the top.
txt.type
Returns the type of the control.
txt.underline
Sets or returns whether the text is underlined or not.
txt.variant
Sets or returns the text variants. See options param above for available values.
txt.verticalAlignment
Sets or returns the vertical alignment of the text. Values can be Top Center or Bottom.
txt.visibility
Sets or returns the visibility of the control.
txt.width
Sets or returns the width of the control as a fraction of the parent control.