addCheckbox

Hello World

Content:
- Examples
- Properties
- Methods

A checkbox in UI development is a graphical control element that allows users to toggle between two states, typically checked or unchecked, to indicate a choice or selection.

ckb = ui.addCheckbox( parent, text, options?, width?, height? ) → ui object: Checkbox

Here are the methods available for Checkbox Component

Examples

Example - Basic click to expand contents

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

        // Add a checkbox control to the main layout
        this.ckb = ui.addCheckbox(this.main, "This is checkbox label")

        // Add a callback handler for `onTouch` event
        this.ckb.setOnTouch( this.onTouch )
    }

    onTouch( value )
    {
        ui.showPopup( `Value is ${ value }` )
    }
}

Copy All

Example - Colors click to expand contents

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

        // Add a default checkbox control to the main layout
        this.ckb1 = ui.addCheckbox(this.main, "This is checkbox label")
        this.ckb1.setOnTouch( this.onTouch )

        // Add a primary checkbox control to the main layout
        this.ckb2 = ui.addCheckbox(this.main, "This is checkbox label", "Primary")
        this.ckb2.setOnTouch( this.onTouch )

        // Add a secondary checkbox control to the main layout
        // and set its value to `true`
        this.ckb3 = ui.addCheckbox(this.main, "This is checkbox label", "Secondary")
        this.ckb3.value = true
        this.ckb3.setOnTouch( this.onTouch )
    }

    onTouch( value )
    {
        ui.showPopup( `Value is ${ value }` )
    }
}

Copy All

Example - Text positions click to expand contents

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

        // Add a checkbox with label on the right.
        this.ckb1 = ui.addCheckbox(this.main, "Checkbox on the left", "Left")
        this.ckb1.setOnTouch( this.onTouch )

        // Add a checkbox with label on the bottom.
        this.ckb2 = ui.addCheckbox(this.main, "Checkbox on the top", "Primary,Top")
        this.ckb2.setOnTouch( this.onTouch )

        // Add a checkbox with label on the left.
        this.ckb3 = ui.addCheckbox(this.main, "Checkbox on the right", "Secondary,Right")
        this.ckb3.setOnTouch( this.onTouch )

        // Add a checkbox with label on top.
        this.ckb4 = ui.addCheckbox(this.main, "Checkbox on the bottom", "Secondary,Bottom")
        this.ckb4.setOnTouch( this.onTouch )
    }

    onTouch( value )
    {
        ui.showPopup( `Value is ${ value }` )
    }
}

Copy All

Example - Adding custom checkbox icon click to expand contents

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

        // Adds checkbox control to the main layout
        this.ckb = ui.addCheckbox(this.main, "This is checkbox label", "Left,Secondary")

        // Set the checked icon to `favorite`
        // and uncheck icon to `person`
        this.ckb.setIcon("favorite", "person")

        // Add a callback handler for `onTouch` event
        this.ckb.setOnTouch( this.onTouch )
    }

    onTouch( value )
    {
        ui.showPopup( `Value is ${ value }` )
    }
}

Copy All

Properties

The following properties are available on the Checkbox object:

absHeight → Number

absLeft → Number

absTop → Number

absWidth → Number

backColor → String

backImage → String

border → Number

borderColor → String

borderStyle → String

checkIcon → String

color → String

cornerRadius → Number

disable → Boolean

disabled → Boolean

el → Object

elStyle → String

enabled → Boolean

fontFile → String

height → Number

iconColor → String

iconSize → Number

isVisible → Boolean

left → Number

margins → List

opacity → Number

options → String

padding → List

parent → Object

position → Object

rotation → Number

spaceBetween → Number

text → String

textColor → String

textPosition → String

textSize → Number

top → Number

type → String

uncheckIcon → String

value → Boolean

visibility → String

width → Number

Methods

The following methods are available on the Checkbox object:

animate( anim, duration )

bringForward( zIndex )

destroy()

getIcon() → Object

getPosition( options ) → Object

gone()

hide()

sendBackward( zIndex )

setBorder( left?, top?, right?, bottom?, clr?, style? )

setCornerRadius( tl?, tr?, br?, bl?, mode? )

setIcon( checked, unchecked )

setMargins( left?, top?, right?, bottom?, mode? )

setOnContextMenu( callback )

setOnTouch( callback )

setPadding( left?, top?, right?, bottom?, mode? )

setPosition( left, top, mode )

setScale( x, y )

setSize( width, height, mode )

show()

Examples

Example - Basic click to expand contents

Example - Colors click to expand contents

Example - Text positions click to expand contents

Example - Adding custom checkbox icon click to expand contents

Properties

Methods

loading