Back

addRadioGroup

JS Py

Hello World

Content:
- Properties
- Methods

Adds a radiogroup component into your app.

rdg = ui.addRadioGroup( parent, list, options, width, height ) → Object: RadioGroup Component

A radiogroup is a type of select list that can only have a single value being checked at a time.

Pass required as option to have atleast one value selected.

Properties

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

absHeight

absLeft

absTop

absWidth

backColor

backImage

border

borderColor

borderStyle

color

cornerRadius

disabled

elevation

fontFile

height

iconColor

iconPosition

isVisible

itemPadding

label

left

list

margins

opacity

options

outlined

padding

parent

position

radioSize

rotation

spaceBetween

textColor

textPosition

textSize

top

type

value

visibility

width

Example - Basic radiogroup

Copy All Run

Example - Elevated secondary radiogroup

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

        // Initialize list items to show
        var items = ["Item 1", "Item 2", "Item 3"]

        // Add an elevated radiogroup control to the main layout
        this.rdg = ui.addRadioGroup(this.main, items, "Elevated,Secondary", 0.6)

        // Set the label text of the radiogroup
        this.rdg.label = "Select one"

        // Set the elevation depth
        this.rdg.elevation = 4

        // Add a callback handler when the value changes
        this.rdg.setOnChange( this.onChange )
    }

    onChange(text, index)
    {
        ui.showPopup("You choose " + text)
    }
}

from hybrid import ui

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

    # Initialize list items to show
    items = ["Item 1", "Item 2", "Item 3"]

    # Add an elevated radiogroup control to the main layout
    rdg = ui.addRadioGroup(main, items, "Elevated,Secondary", 0.6)

    # Set the label text of the radiogroup
    rdg.label = "Select one"

    # Set the elevation depth
    rdg.elevation = 4

    # Add a callback handler when the value changes
    rdg.setOnChange( onChange )

def onChange(text):
    ui.showPopup("You choose " + text)

Copy All Run

Example - Outlined and radios to the right

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

        // Initialize list items to show
        var items = ["Item 1", "Item 2", "Item 3"]

        // Add an outlined radiogroup control to the main layout
        // Passing `Right` will display the radios to the right
        this.rdg = ui.addRadioGroup( this.main, items, "Outlined,Primary,Right", 0.6)

        // Set the label text of the radiogroup
        this.rdg.label = "Select one"

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

        // Add a callback handler when the value changes
        this.rdg.setOnChange( this.onChange )
    }

    onChange(text, index)
    {
        ui.showPopup("You choose " + text)
    }
}

from hybrid import ui

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

    # Initialize list items to show
    items = ["Item 1", "Item 2", "Item 3"]

    # Add an outlined radiogroup control to the main layout
    # Passing `Right` will display the radios to the right
    rdg = ui.addRadioGroup( main, items, "Outlined,Primary,Right", 0.6)

    # Set the label text of the radiogroup
    rdg.label = "Select one"

    # Set the corner radius to 12
    rdg.cornerRadius = 12

    # Add a callback handler when the value changes
    rdg.setOnChange( onChange )

def onChange(text):
    ui.showPopup("You choose " + text)

Copy All Run

Methods

The following methods are available on the RadioGroup object:

addItem( name, index )

animate( anim, duration )

bringForward( zIndex )

destroy()

getEnabled( index ) → Boolean

getEnabledByName( name ) → Boolean

getPosition( options ) → Object

gone()

hide()

popItem()

removeItemByIndex( index )

removeItemByName( name )

sendBackward( zIndex )

setBorder( width, clr, style )

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

setEnabled( index, value )

setEnabledByName( name, value )

setItemByIndex( item, index )

setItemByName( name, text )

setList( val )

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

setOnChange( callback )

setOnContextMenu( callback )

setOnTouch( callback )

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

setPosition( left, top, mode )

setScale( x, y )

setSize( width, height )

shiftItem()

show()

Boolean: Values can be `true` or `false`. If `false`, the item will be disabled.

Boolean: Values can be `true` or `false`.

Boolean: Sets or returns the disabled state of the radio button group.

Boolean: Returns whether the control is visible or not.

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

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

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

Number: The index in which to add the item.

Number: The time in milliseconds.

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

Number: The index of the corresponding item.

Number: The index of the item to remove.

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: The index of the item.

Number: The index to of the item to be updated

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 RadioGroup container. Value ranges from 0 to 24.

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

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 space between the radio button and the text.

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: comma “,” separated: “Radio Sizes: `Small` `Medium`
`Colors`: `Primary` `Secondary`
`Icon Position: `Left` or `Right`
`Container`: `Elevated` or `Outlined`
`Corner`: `Square`
`Required`”

String: “The new item to be added.”

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 radiogroup text.”

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

String: “The name of the item to remove.”

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: “The new item name to be displayed”

String: “The name of the item.”

String: “The new text to replaced the name of the item.”

String: “A comma separated items”

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: 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 Radio Component. Values 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 hexadecimal format.

String: Sets or returns the position of the icon. Values can be left or right

String: Sets or returns the label text of the RadioGroup Component.

String: Sets or returns the options of the control.

String: Sets or returns the size of the radio button. Values can be Small or Medium

String: Stest or returns the color of the text in hexadecimal format. You can also pass color names e.g. red, green or blue.

String: Sets or returns the position of the label text. Values can be left or right.

String: Returns the type of the control.

String: Sets or returns the value of the RadioGroup Component. This must be equal to one of the item in the list.

String: Sets or returns the visibility of the control.

Object: The parent where to add the RadioGroup component.

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: The list items array.

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

List: Sets or returns the list array. You can also pass a comma separated string of items.

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

function( label, index, event )

function( checked, label, index, event )

rdg.addItem
Adds an item in the radio group list

rdg.animate
Animate the component

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

rdg.destroy
Destroy the component

rdg.getEnabled
Get the enabled state of an item in the radio group

rdg.getEnabledByName
Get the enabled state of a radiogroup item by its name

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

rdg.gone
Destroy the component

rdg.hide
Hide the component

rdg.popItem
Removes the last item in the radiogroup

rdg.removeItemByIndex
Removes an item in the radiogroup items list by its index

rdg.removeItemByName
Removes an item in the radiogroup items list by its name

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

rdg.setBorder
Sets the border line for the component container

rdg.setCornerRadius
Sets the corner radius of the radiogroup container

rdg.setEnabled
Enable or disable the radiogroup or an item in the radiogroup

rdg.setEnabledByName
Enable or disable a radiogroup item by its name

rdg.setItemByIndex
Sets an item in the radiogroup component

rdg.setItemByName
Updates an item in the list by its corresponding name

rdg.setList
Sets the the radiogroup list items

rdg.setMargins
Sets the margin of the component

rdg.setOnChange
Call a function when the value of the radio group has changed

rdg.setOnContextMenu
Adds a callback function on right click

rdg.setOnTouch
Adds a callback function when an item is click

rdg.setPadding
Sets the padding component container

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

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

rdg.setSize
Sets the size of the component

rdg.shiftItem
Removes the first item in the radiogroup

rdg.show
Show the component