Back

addRadioGroup

JS Py

Hello World

Content:
- Examples
- Properties
- Methods

Adds a radiogroup component into your app.

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

Pass required as option to have atleast one value selected.

Here are the available methods available to RadioGroup Component.

Examples

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

Properties

The following properties are available on the RadioGroup object:

absHeight → Number

absLeft → Number

absTop → Number

absWidth → Number

backColor → String

backImage → String

border → Number

borderColor → String

borderStyle → String

color → String

cornerRadius → Number

disabled → Boolean

el → Object

elevation → Number

elStyle → String

fontFile → String

height → Number

iconColor → String

iconPosition → String

isVisible → Boolean

itemPadding → List

label → String

left → Number

list → List

margins → List

opacity → Number

options → String

orientation → String

outlined → Boolean

padding → List

parent → Object

position → Object

radioSize → String

rotation → Number

spaceBetween → Number

textColor → String

textPosition → String

textSize → Number

top → Number

type → String

value → Number

visibility → String

width → Number

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( left?, top?, right?, bottom?, clr?, style? )

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

setEnabled( index, value )

setEnabledByName( name, value )

setItemByIndex( item, index )

setItemByName( name, text )

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

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, mode )

shiftItem()

show()

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

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

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

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

Number: The index to of the item to be updated

Number: Left padding of the radio item.

Number: Top padding of the radio item.

Number: Right padding of the radio item.

Number: Bottom padding of the radio 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.
Radio Sizes: `Small`”, “ `Medium`
Theme Colors: `Primary`”, “ `Secondary`”, “ Default
Orientation: `Horizontal`”, “ `Vertical`
Icon Position: `Left`”, “ `Right`
Container: `Elevated`”, “ `Outlined`
Corner: `Square`
Utils: `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 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: “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: “Unit of measurement. Can be `rem`”, “ `px`”, “ `%`”, “ or `v` for viewport.”

String: “A comma separated items”

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

Object: The parent where to add the RadioGroup component.

Object: The position of the touch event.

List: The list items array.

function( text , index )

function( label , index , pos )

function( checked , label , index , pos )

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

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

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

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

rdg.addItem
Adds an item in the radio group list.

rdg.animate
Animate the component.

rdg.backColor
A hexadecimal color of the form #rrggbb

rdg.backImage
The path to your image file.

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

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

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

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

rdg.color
Sets or returns the theme color of the Radio Component. Values can be Default Primary or Secondary

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

rdg.destroy
Destroy the component.

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

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

rdg.elevation
Sets or returns the depth of the RadioGroup container. Value ranges from 0 to 24.

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

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

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

rdg.hide
Hide the component.

rdg.iconColor
Sets or returns the icon color in hexadecimal format.

rdg.iconPosition
Sets or returns the position of the icon. Values can be left or right

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

rdg.itemPadding
Sets or returns the padding of each radio item. See also setItemPadding method.

rdg.label
Sets or returns the label text of the RadioGroup Component.

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

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

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

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

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

rdg.orientation
Sets or returns the orientation of the list. Can be "Vertical" or "Horizontal".

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

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

rdg.parent
Returns the parent layout control.

rdg.popItem
Removes the last item in the radiogroup. This will return the item being removed.

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

rdg.radioSize
Sets or returns the size of the radio button. Values can be Small or Medium

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.rotation
Sets or returns the angle of rotation in degrees.

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

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

rdg.setSize
Sets the size of the component.

rdg.shiftItem
Removes the first item in the radiogroup. This will return the item being removed.

rdg.show
Show the component.

rdg.spaceBetween
Sets or returns the space between the radio button and the text.

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

rdg.textPosition
Sets or returns the position of the label text. Values can be left or right.

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

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

rdg.type
Returns the type of the control.

rdg.value
Sets or returns the value of the RadioGroup Component as an index of the selected item.

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

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