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

        // Add a default chip to the main layout
        this.chip1 = ui.addChip(this.main, "Basic Chip")

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

        // Add a small primary chip
        this.chip2 = ui.addChip(this.main, "Small Primary Chip", "Primary,Small")
        this.chip2.setOnTouch( this.onTouch )

        // Add a touchable secondary chip
        this.chip3 = ui.addChip(this.main, "Secondary Chip", "Secondary,Touchable")
        this.chip2.setOnTouch( this.onTouch )
    }

    onTouch()
    {
        ui.showPopup( "You touched the chip!" )
    }
}

from hybrid import ui

def OnStart():
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")
    main.setChildMargins(0, 0.025, 0, 0.025)

    # Add a default chip to the main layout
    chip1 = ui.addChip(main, "Basic Chip")

    # Add a callback handler for `onTouch` event.
    chip1.setOnTouch(onTouch)

    # Add a small primary chip
    chip2 = ui.addChip(main, "Small Primary Chip", "Primary,Small")
    chip2.setOnTouch(onTouch)

    # Add a touchable secondary chip
    chip3 = ui.addChip(main, "Secondary Chip", "Secondary,Touchable")
    chip3.setOnTouch(onTouch)

def onTouch(event):
    ui.showPopup("You touched the chip!")

sample = Main()
sample.start()

Copy All Run

Example - Deletable chip

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

        // Add a touchable and deletable chip
        this.chip = ui.addChip(this.main, 'Deletable', 'Secondary,Touchable')

        // Add callback hanlder for `onDelete` event.
        // This will also add a delete icon to the chip.
        this.chip.setOnDelete( this.onDelete )
    }

    onDelete()
    {
        ui.showPopup( "Chip is deleted!" )
    }
}

from hybrid import ui

def OnStart():
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Add a touchable and deletable chip
    chip = ui.addChip(main, 'Deletable', 'Secondary,Touchable')

    # Add callback hanlder for `onDelete` event.
    # This will also add a delete icon to the chip.
    chip.setOnDelete(onDelete)

def onDelete():
    ui.showPopup("Chip is deleted!")

sample = Main()
sample.start()

Copy All Run

Example - Custom styles

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

        // Add a chip control to the main layout
        this.chip = ui.addChip(this.main, "Shopping Cart")

        // Add a leading icon to the chip control
        this.chip.icon = "shopping_cart"

        // Sets the icon color of the chip control
        this.chip.iconColor = "#673ab7"

        // Sets the text size of the chip control
        this.chip.textSize = 14
    }
}

from hybrid import ui

def OnStart():
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Add a chip control to the main layout
    chip = ui.addChip(main, "Shopping Cart")

    # Add a leading icon to the chip control
    chip.icon = "shopping_cart"

    # Sets the icon color of the chip control
    chip.iconColor = "#673ab7"

    # Sets the text size of the chip control
    chip.textSize = 14

sample = Main()
sample.start()

Copy All Run

Example - Avatar

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

        // Add a chip control to the main layout
        this.chip = ui.addChip(this.main, "Character Avatar")

        // Set the avatar property of the main layout
        this.chip.avatar = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Hapus_Mango.jpg/220px-Hapus_Mango.jpg"
    }
}

from hybrid import ui

def OnStart():
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Add a chip control to the main layout
    chip = ui.addChip(main, "Character Avatar")

    # Set the avatar property of the main layout
    chip.avatar = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Hapus_Mango.jpg/220px-Hapus_Mango.jpg"

sample = Main()
sample.start()

Copy All Run

Methods

The following methods are available on the Chip object:

animate( anim, duration )

bringForward( zIndex )

destroy()

getPosition( options ) → Object

gone()

hide()

sendBackward( zIndex )

setBorder( width, clr, style )

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

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

setOnContextMenu( callback )

setOnDelete( callback )

setOnTouch( callback )

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

setPosition( left, top, mode )

setScale( x, y )

setSize( width, height )

setTouchable( touchable )

show()

Boolean: `true` or `false`

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

Boolean: Returns whether the chip is enabled or disabled.

Boolean: Returns whether the control is visible or not.

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

Number: Fraction of the screen 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: Top-left corner radius.

Number: Top-right corner radius.

Number: Bottom-left corner radius.

Number: Bottom-right corner radius.

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 height of the control as a fraction of the parent control.

Number: Sets or returns the font-size of the icon in css font-size format. You can pass string values to be more specific such as 12px 1.5rem.

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: 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: “The text on the chip.”

String: comma “,” separated: “Color: `Primary` `Secondary` `Default`
`Size`: `Small` `Medium`
`Variant`: `Outlined` `Default`
`Util`: `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 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: “`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: Sets or returns the avatar. Can be image or a single character.

String: A hexadecimal color of the form #rrggbb

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 chip. Values can be Default Primary Secondary

String: Sets or returns the delete icon.

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

String: Sets or returns the material icon font if icon is provided.

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

String: Sets or returns the options of the control.

String: Sets or returns the size variant. Values can be small or medium

String: Sets or returns the text of the chip.

String: Sets or returns the color of the text.

String: Returns the type of the control.

String: Sets or returns the variant of the chip. Vaues can be Default or Outlined

String: Sets or returns the visibility of the control.

Object: The parent layout where to add the Chip.

Object: The pointer event object.

Object: The click 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: 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( event )

function()

function( event )

chp.animate
Animate the component

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

chp.destroy
Destroy the component

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

chp.gone
Destroy the component

chp.hide
Hide the component

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

chp.setBorder
Sets the border line for the component container

chp.setCornerRadius
Sets the corner radius of the chip

chp.setMargins
Sets the margin of the component

chp.setOnContextMenu
Adds a callback function on right click

chp.setOnDelete
Sets a callback function when the chip is deleted. This will automatically add a delete icon to the chip

chp.setOnTouch
Adds a callback handler when the component is touch

chp.setPadding
Sets the padding component container

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

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

chp.setSize
Sets the size of the component

chp.setTouchable
Sets the chip to clickable. This will add a pointer cursor into the chip when hovered

chp.show
Show the component