Back

addList

JS Py

Hello World

Content:
- Examples
- Properties
- Methods

Lists are continuous, vertical indexes of text or images.

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

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.

Here are the following methods available on the List Component.

Examples

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://sample-ds-tutorials.firebaseapp.com/img/ds-logo.png"

        // 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:# sample-ds-tutorials.firebaseapp.com/img/ds-logo.png"

        # 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

Properties

The following properties are available on the List object:

absHeight → Number

absLeft → Number

absTop → Number

absWidth → Number

avatarSize → String

avatarVariant → String

backColor → String

backImage → String

border → Number

borderColor → String

borderStyle → String

checkboxColor → String

cornerRadius → Number

disabled → Boolean

el → Object

elevation → Number

elStyle → String

fontFile → String

height → Number

iconColor → String

iconSize → Number

isVisible → Boolean

itemPadding → List

label → String

left → Number

margins → List

opacity → Number

options → String

outlined → Boolean

padding → List

parent → Object

position → Object

rotation → Number

selectable → Boolean

textColor → String

textColor1 → String

textColor2 → String

textSize → Number

textSize1 → Number

textSize2 → Number

top → Number

type → String

visibility → String

width → Number

Methods

The following methods are available on the List object:

addItem( title, body?, image?, action?, index? )

animate( anim, duration )

bringForward( zIndex )

deselectAll()

destroy()

getItem( title, json ) → Object

getItemByIndex( index, json ) → Object

getPosition( options ) → Object

getSelectedItems() → List

getSelectedTitles() → List

gone()

hide()

popItem()

removeItemByIndex( index )

removeItemByName( name )

selectItemByIndex( index )

sendBackward( zIndex )

setBodyText( index, newText )

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

setCornerRadius( tl?, tr?, bl?, br?, mode='px' )

setIcon( index, icon )

setItem( title, newTitle, newBody?, newIcon?, newAction? )

setItemByIndex( index, newTitle, newBody?, newIcon?, newAction? )

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

setList( list )

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

setOnAction( callback )

setOnContextMenu( callback )

setOnLongTouch( callback )

setOnSelect( callback )

setOnTouch( callback )

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

setPosition( left, top, mode )

setScale( x, y )

setSelectable( selectable )

setSize( width, height, mode )

setTitleText( index, title )

shiftItem()

show()

Boolean: Pass `true` to return the corresponding list item as an object of the form `{title, body, image, action}`

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

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

Number: Fraction of the parent 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 corresponding list item.

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: Border-top thickness in pixels.

Number: Border-right thickness in pixels.

Number: Border-bottom 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: Left padding of the list item.

Number: Top padding of the list item.

Number: Right padding of the list item.

Number: Bottom padding of the list item.

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.

String: “A comma separated options.
Media: `Icon`”, “ `Avatar`
Styling: `Dense`”, “ `Inset`
Utils: `Selectable`”, “ `Divider`”, “ `SecondaryText`”, “ `NoRipple`”, “ `NoScrollBar`”

String: “The title of the item.”

String: “The text description of the item.”

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

String: “A text for the action or material icon.”

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: “Title of the list item.”

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 format `#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: “A material icon font for the action icon button.”

String: “The new title of the item”

String: “The new body text”

String: “The new icon or image”

String: “The new action icon or action text”

String: “Unit of measurement. Can be `rem`”, “ `px`”, “ `%`”, “ or `v` for viewport.”

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: “The new title text.”

Object: The parent layout

Object: The position of the touch event.

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.

function( icon , index )

function( title , body , icon , action , index , pos )

function( title , index , checked )

lst.absHeight
Returns the absolute height of the control in pixels.

lst.absLeft
Returns the absolute distance of the control from the left in pixels.

lst.absTop
Returns the absolute distance of the control from the top in pixels.

lst.absWidth
Returns the absolute width of the control in pixels.

lst.addItem
Adds an item in the list.

lst.animate
Animate the component.

lst.avatarSize
Sets or returns the size of the avatar. Values can be Small Medium Large

lst.avatarVariant
Sets or returns the variant of the avatar. Values can be Square Round or Circle

lst.backColor
A hexadecimal color of the form #rrggbb

lst.backImage
The path to your image file.

lst.border
Sets or returns the border thickness in pixels.

lst.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb

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

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

lst.checkboxColor
Sets or returns the theme color of the checkbox when Selectable option is enabled. Values can be Default Primary or Secondary or hexadecimal color.

lst.cornerRadius
Sets or returns the corner radius in pixels.

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

lst.destroy
Destroy the component.

lst.disabled
Sets or returns the disabled state of the control.

lst.el
Returns the html container element for the control.

lst.elevation
Sets or returns the depth of the list container. Values range from 0 to 24.

lst.elStyle
Sets the style of the html container element.

lst.fontFile
Sets or returns the relative path to the font-family use.

lst.getItem
Get the item in the list by its corresponding 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.height
Sets or returns the height of the control as a fraction of the parent control.

lst.hide
Hide the component.

lst.iconColor
Sets or returns the icon color in a hexadecimal format.

lst.iconSize
Sets or returns the size of the icon text.

lst.isVisible
Returns whether the control is visible or not.

lst.itemPadding
Sets or returns the padding of each list item. See also setItemPadding method.

lst.label
Sets or returns the label text.

lst.left
Returns the distance of the control from the left.

lst.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.

lst.opacity
Sets or returns the opacity of the control.

lst.options
Sets or returns the options of the control.

lst.outlined
Sets or returns whether the container is outlined or elevated.

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

lst.parent
Returns the parent layout control.

lst.popItem
Removes the last item in the list. This will return the item being removed.

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

lst.removeItemByIndex
Removes an element from the list.

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

lst.rotation
Sets or returns the angle of rotation in degrees.

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

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.setItemPadding
Sets the padding of the list item. See itemPadding property for equivalent setter/getter property.

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.setOnLongTouch
Adds a callback handler for a long touch event. The touch timer is about 500 milliseconds.

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 of the component's 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. This will ignore the positioning and flow of controls in the layout.

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. This will return the item being removed.

lst.show
Show the component.

lst.textColor
Sets or returns the color of the text.

lst.textColor1
Sets or returns the color of the title text in hexadecimal format.

lst.textColor2
Sets or returns the color of the body text in hexadecimal format.

lst.textSize
Sets or returns the size of the text within the control.

lst.textSize1
Sets or returns the size of the title text.

lst.textSize2
Sets or returns the size of the body text.

lst.top
Returns the distance of the control from the top.

lst.type
Returns the type of the control.

lst.visibility
Sets or returns the visibility of the control.

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