Back

addList

JS Py

Hello World

Content:
- Properties
- Methods

Lists are continuous, vertical indexes of text or images.

lst = ui.addList( parent, list, options, width, height ) → Object: List Component

They are used to group together related pieces of data or informations to highlight association with each other and easy to read. They are frequently used for navigation as well as displaying general content.

Add a list to your app by calling the addList method of the ui object.

If Icon option is passed, the list must be of the form [icon, title, body, secondary]. To display an image avatar, passed and additional Avatar option and the list must be of the form [image, title, body, secondary]

If no Icon option is passed, the list is treated as [title, body, secondary] by default.

The secondary action is an icon button by default, to display as a text passed secondarytext option.

Adding a selectable list will disregard the icon option.

Properties

These are the setter and getter properties for the addList Component.

absHeight

absLeft

absTop

absWidth

avatarSize

avatarVariant

backColor

backImage

border

borderColor

borderStyle

checkboxColor

cornerRadius

disabled

elevation

fontFile

height

iconColor

iconSize

isVisible

itemPadding

label

left

margins

opacity

options

outlined

padding

parent

position

rotation

selectable

textColor

textColor1

textColor2

textSize

textSize1

textSize2

top

type

visibility

width

Example - Basic list

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

        // Initialize the list items to show
        var list = ["Javascript", "Java", "Python"]

        // Add a list control to the main layout
        this.lst = ui.addList(this.main, list, "", 0.6)

        // Adds a callback handler when the list is touched
        this.lst.setOnTouch( this.onTouch )
    }

    onTouch( title, body, icon, action, index )
    {
        ui.showPopup( title, "Short" )
    }
}

from hybrid import ui

def OnStart():
            main = ui.addLayout("main", "Linear", "VCenter,FillXY")

            list = ["Javascript", "Java", "Python"]

            lst = ui.addList(main, list,

Copy All Run

Example - List with icon and body

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, 0, 0.02)

        // Initialize the list items to show
        var list = [
            ["favorite", "Javascript", "This is a sample body text."],
            ["person", "Java", "This is a sample body text."],
            ["settings", "Python", "This is a sample body text."]
        ]

        // Add a list control with icon to the main layout
        this.lst = ui.addList(this.main, list, "Icon", 0.8)

        // Adds a callback handler when the list is touched
        this.lst.setOnTouch( this.onTouch )

        // Add a button control to the main layout
        this.btn = ui.addButton(this.main, "Change Icon Color", "Outlined")

        // Add a callback handler to change the icon color when the button is touched
        this.btn.setOnTouch( this.changeIconColor )
    }

    onTouch(title, body, icon, action, index)
    {
        ui.showPopup(title, "Short")
    }

    changeIconColor()
    {
        this.lst.iconColor = "#e91e63"
    }
}

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, 0, 0.02)

        # Initialize the list items to show
        list = [
            ["favorite", "Javascript", "This is a sample body text."],
            ["person", "Java", "This is a sample body text."],
            ["settings", "Python", "This is a sample body text."]
        ]

        # Add a list control with icon to the main layout
        this.lst = ui.addList(this.main, list, "Icon", 0.8)

        # Adds a callback handler when the list is touched
        this.lst.setOnTouch( this.onTouch )

        # Add a button control to the main layout
        this.btn = ui.addButton(this.main, "Change Icon Color", "Outlined")

        # Add a callback handler to change the icon color when the button is touched
        this.btn.setOnTouch( this.changeIconColor )

    onTouch(title, body, icon, action, index)
        ui.showPopup(title, "Short")

    changeIconColor()
        this.lst.iconColor = "#e91e63"

Copy All Run

Example - Contacts list

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

        // Avatar url
        var avatar = "https://static.wikia.nocookie.net/heroes-and-villain/images/7/7e/Bilbo_BOFA_12.png/revision/latest/scale-to-width-down/350?cb=20190320192007"

        // Initialize the contact items to show
        var list = [
            [avatar, "Frodo", "+0123456789"],
            [avatar, "Bilbo", "+0123456789"],
            [avatar, "Well", "+0123456789"]
        ]

        // Add a list control with avatar to the main layout
        this.lst = ui.addList(this.main, list, "Avatar", 0.8)

        // Adds a callback handler when the list is touched
        this.lst.setOnTouch( this.onTouch )
    }

    onTouch(title, body, icon, action, index)
    {
        ui.showPopup(title + " : " +body, "Short")
    }
}

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

        # Avatar url
        avatar = "https:# static.wikia.nocookie.net/heroes-and-villain/images/7/7e/Bilbo_BOFA_12.png/revision/latest/scale-to-width-down/350?cb=20190320192007"

        # Initialize the contact items to show
        list = [
            [avatar, "Frodo", "+0123456789"],
            [avatar, "Bilbo", "+0123456789"],
            [avatar, "Well", "+0123456789"]
        ]

        # Add a list control with avatar to the main layout
        this.lst = ui.addList(this.main, list, "Avatar", 0.8)

        # Adds a callback handler when the list is touched
        this.lst.setOnTouch( this.onTouch )

    onTouch(title, body, icon, action, index)
        ui.showPopup(title + " : " +body, "Short")

Copy All Run

Example - Elevated list

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

        // Initialize the list items to show
        var list = [
            ["favorite", "Javascript", "This is a sample body text."],
            ["person", "Java", "This is a sample body text."],
            ["settings", "Python", "This is a sample body text."]
        ]

        // Add an elevated list control to the main layout
        this.lst = ui.addList(this.main, list, "Icon,Elevated", 0.8)

        // Set the elevation depth to 5
        this.lst.elevation = 5

        // Set the list label
        this.lst.label = "This is a label text"

        // Adds a callback handler when the list is touched
        this.lst.setOnTouch( this.onTouch )
    }

    onTouch(title, body, icon, action, index)
    {
        ui.showPopup(title + " : " +body, "Short")
    }
}

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

        # Initialize the list items to show
        list = [
            ["favorite", "Javascript", "This is a sample body text."],
            ["person", "Java", "This is a sample body text."],
            ["settings", "Python", "This is a sample body text."]
        ]

        # Add an elevated list control to the main layout
        this.lst = ui.addList(this.main, list, "Icon,Elevated", 0.8)

        # Set the elevation depth to 5
        this.lst.elevation = 5

        # Set the list label
        this.lst.label = "This is a label text"

        # Adds a callback handler when the list is touched
        this.lst.setOnTouch( this.onTouch )

    onTouch(title, body, icon, action, index)
        ui.showPopup(title + " : " +body, "Short")

Copy All Run

Example - Outlined List

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

        // Initialize the list items to show
        var list = [
            ["favorite", "Javascript", "This is a sample body text."],
            ["person", "Java", "This is a sample body text."],
            ["settings", "Python", "This is a sample body text."]
        ]

        // Add an outlined list control to the main layout
        this.lst = ui.addList(this.main, list, "Icon,Outlined", 0.8)

        // Set the list label
        this.lst.label = "My awesome list"

        // Set the corner radius to 12
        this.lst.cornerRadius = 12

        // Adds a callback handler when the list is touched
        this.lst.setOnTouch( this.onTouch )
    }

    onTouch(title, body, icon, action, index)
    {
        ui.showPopup(title + " : " +body, "Short")
    }
}

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

        # Initialize the list items to show
        list = [
            ["favorite", "Javascript", "This is a sample body text."],
            ["person", "Java", "This is a sample body text."],
            ["settings", "Python", "This is a sample body text."]
        ]

        # Add an outlined list control to the main layout
        this.lst = ui.addList(this.main, list, "Icon,Outlined", 0.8)

        # Set the list label
        this.lst.label = "My awesome list"

        # Set the corner radius to 12
        this.lst.cornerRadius = 12

        # Adds a callback handler when the list is touched
        this.lst.setOnTouch( this.onTouch )

    onTouch(title, body, icon, action, index)
        ui.showPopup(title + " : " +body, "Short")

Copy All Run

Example - Selectable List

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

        var list = ["Javascript", "Java", "Python"]

        // Add a list control to the main layout
        this.lst = ui.addList(this.main, list, "", 0.6)

        // Set the list label
        this.lst.label = "Long press any item to select"

        // Add on long touch event and set the list to selectable
        this.lst.setOnLongTouch( this.onLongTouch )

        // Add `onSelect` event listener to the list
        // and display the selected item in the popup
        this.lst.setOnSelect( this.onSelect )
    }

    onLongTouch()
    {
        this.lst.selectable = true
    }

    onSelect(title, i, value)
    {
        ui. showPopup(title + " : " + value)
    }
}

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

        list = ["Javascript", "Java", "Python"]

        # Add a list control to the main layout
        this.lst = ui.addList(this.main, list, "", 0.6)

        # Set the list label
        this.lst.label = "Long press any item to select"

        # Add on long touch event and set the list to selectable
        this.lst.setOnLongTouch( this.onLongTouch )

        # Add `onSelect` event listener to the list
        # and display the selected item in the popup
        this.lst.setOnSelect( this.onSelect )

    onLongTouch()
        this.lst.selectable = true

    onSelect(title, i, value)
        ui. showPopup(title + " : " + value)

Copy All Run

Methods

The following methods are available on the List object:

addItem( title, body, image, index )

animate( anim, duration )

bringForward( zIndex )

deselectAll()

destroy()

getItem( title )

getItemByIndex( index )

getPosition( options ) → Object

getSelectedItems()

getSelectedTitles()

gone()

hide()

popItem()

removeItemByIndex( index )

removeItemByName( name )

selectItemByIndex( index )

sendBackward( zIndex )

setBodyText( index, newText )

setBorder( width, clr, style )

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

setIcon( index, icon )

setItem( title, newTitle, newBody, newImage )

setItemByIndex( index, newTitle, newBody, newImage )

setList( list )

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

setOnAction( callback )

setOnContextMenu( callback )

setOnSelect( callback )

setOnTouch( callback )

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

setPosition( left, top, mode )

setScale( x, y )

setSelectable( selectable )

setSize( width, height )

setTitleText( index, title )

shiftItem()

show()

Boolean: If true, make the list selectable. Otherwise, list is not selectable

Boolean: Sets or returns the disabled state of the control.

Boolean: Returns whether the control is visible or not.

Boolean: Sets or returns whether the container is outlined or elevated.

Boolean: Sets or returns a boolean whether the list is selectable or not.

Number: Fraction of the screen width. [0-1]

Number: Fraction of the screen height. [0-1]

Number: The index in which to add or insert the item.

Number: The time in milliseconds.

Number: The z-index. A negative value behaves like `sendBackward` method.

Number: Returns the item in a list as an object of the following format { title, body, image }

Number: The index of the item to remove

Number: The index to be selected.

Number: The z-index. A positve value behaves like `bringForward` method.

Number: The index of the list whose secondary text to be changed.

Number: Border-left thickness in pixels.

Number: Top-left corner radius.

Number: Top-right corner radius.

Number: Bottom-left corner radius.

Number: Bottom-right corner radius.

Number: The index of the corresponding list item.

Number: The index of the item to update

Number: Fraction of the parent width.

Number: Fraction of the parent height.

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: 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: Fraction of the parent height. [0-1]

Number: Returns the absolute height of the control in pixels.

Number: Returns the absolute distance of the control from the left in pixels.

Number: Returns the absolute distance of the control from the top in pixels.

Number: Returns the absolute width of the control in pixels.

Number: Sets or returns the border thickness in pixels.

Number: Sets or returns the corner radius in pixels.

Number: Sets or returns the depth of the list container. Values range from 0 to 24.

Number: Sets or returns the height of the control as a fraction of the parent control.

Number: Sets or returns the size of the icon text.

Number: Returns the distance of the control from the left.

Number: Sets or returns the opacity of the control.

Number: Sets or returns the angle of rotation in degrees.

Number: Sets or returns the size of the text within the control.

Number: Sets or returns the size of the title text.

Number: Sets or returns the size of the body text.

Number: Returns the distance of the control from the top.

Number: Sets or returns the width of the control as a fraction of the parent control.

String: comma “,” separated: “Media: `Icon` `Avatar`
`Styling`: `Dense` `Inset`
`Util`: `Selectable` `Divider` `SecondaryText`”, “ `NoRipple` to disable ripple effect”

String: “The title of the item.”

String: “The text description of the item.”

String: “A material icon or image file path.”

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: “Returns the item in a list as an object of the following format { title”, “ body”, “ image }”

String: “The mode of the measurements. Values can be `px` or `%`”

String: “The title of the list to remove.”

String: “The new secondary text.”

String: “Border color in hexadecimal form `#rrggbb`”

String: “Border-styles. Values can be `dotted` `dashed` `solid` `double` `groove` `ridge` `inset` and `outset`. Default is `solid`”

String: “Unit. Values are `px` `rem` or `%`.”

String: “Material icon font.”

String: “The title of the list item to update.”

String: “The new title of the list item.”

String: “The new description of the list item.”

String: “A material icon font or image file path.”

String: “The new title of the item”

String: “The new body text”

String: “The new icon or image”

String: “`px` or `%`”

String: “The size thickness mode. Can be `px`”

String: “Unit of measurement. Can be `px` or `%` or any css unit of measurement.”

String: “The new title text.”

String: Sets or returns the size of the avatar. Values can be Small Medium Large

String: Sets or returns the variant of the avatar. Values can be Square Round or Circle

String: Sets or returns the background color in a hexadecimal format.

String: The path to your image file.

String: Sets or returns the border color. Color is in hexadecimal form #rrggbb

String: Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.

String: Sets or returns the theme color of the checkbox when Selectable option is enabled. Vaues can be Default Primary or Secondary

String: Sets or returns the relative path to the font-family use.

String: Sets or returns the icon color in a hexadecimal format.

String: Sets or returns the label text.

String: Sets or returns the options of the control.

String: Sets or returns the color of the text.

String: Sets or returns the color of the title text in hexadecimal format.

String: Sets or returns the color of the body text in hexadecimal format.

String: Returns the type of the control.

String: Sets or returns the visibility of the control.

Object: The parent layout

Object: The pointer event object.

Object: Returns the parent layout control.

Object: Returns the position of the control. The returned object has left top right and bottom props.

List: An array of arrays. Each element is of the form `[icon, title, body, secondary]`

List: A comma separated list of items or an array. See the list format above.

List: Sets or returns the padding of each list item. See also setItemPadding method.

List: 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.

List: Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.

function( icon, index )

function( title, body, icon, index, event )

function( title, index )

lst.addItem
Adds an item in the list

lst.animate
Animate the component

lst.bringForward
Bring this component forward by a given z-index

lst.deselectAll
Clears all selection in the list if the list is selectable

lst.destroy
Destroy the component

lst.getItem
Get the item in the list by its correspding title

lst.getItemByIndex
Get the item in a list by its corresponding index

lst.getPosition
Returns the position of the component. The return object is of the form `{ left, top, right, bottom

lst.getSelectedItems
Returns an array of indexes of the selected items

lst.getSelectedTitles
Returns an array of titles of selected items

lst.gone
Destroy the component

lst.hide
Hide the component

lst.popItem
Removes the last item in the list

lst.removeItemByIndex
Removes an element from the list

lst.removeItemByName
Removes an item in the list by its title

lst.selectItemByIndex
Selects an item in the list by its index and marked the checkbox. List must be selectable

lst.sendBackward
Bring this component backward by a given z-index

lst.setBodyText
Sets a new secondary text to a corresponding item in a list

lst.setBorder
Sets the border line for the component container

lst.setCornerRadius
Sets the corner radius of the list container

lst.setIcon
Updates an icon in a list by its corresponding index

lst.setItem
Updates an item in the list

lst.setItemByIndex
Change the content of an item in a list

lst.setList
Updtes the list

lst.setMargins
Sets the margin of the component

lst.setOnAction
Sets a callback handler when an action icon is click

lst.setOnContextMenu
Adds a callback function on right click

lst.setOnSelect
Sets a callback handler when an item in the list is selected

lst.setOnTouch
Adds a callback function when the list item is click

lst.setPadding
Sets the padding component container

lst.setPosition
Sets the position of the component relative to its parent dimensions

lst.setScale
Sets the x and y scaling of the component

lst.setSelectable
Make the list selectable or not

lst.setSize
Sets the size of the component

lst.setTitleText
Sets a new title text to a corresponding item in a list

lst.shiftItem
Removes the first item the list

lst.show
Show the component