addText

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 click to expand contents

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!" )
    }
}

Copy All

Example - Heading variants click to expand contents

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" )
    }
}

Copy All

Example - Other variants click to expand contents

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" )
    }
}

Copy All

Example - Alignments and colors click to expand contents

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"
    }
}

Copy All

Example - Icons click to expand contents

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

Example - Html formatted text click to expand contents

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")
    }
}

Copy All

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

Examples

Example - Basic text control click to expand contents

Example - Heading variants click to expand contents

Example - Other variants click to expand contents

Example - Alignments and colors click to expand contents

Example - Icons click to expand contents

Example - Html formatted text click to expand contents

Properties

Methods

loading