Back

addBottomNavbar

JS Py

Hello World

Content:
- Examples ##
- Properties
- Methods

The Bottom Navigation Bar (BottomNavBar) is a key element in mobile user interface design, typically placed at the bottom of the screen.

bmn = ui.addBottomNavbar( parent, navs, options?, width?, height? ) → ui object: BottomNavbar

An example of a navs array.

var navs = [
[ "Favorites", "favorites" ],
[ "Groups", "person" ],
[ "Folder", "folder" ]
]

Here are the methods available for BottomNavbar Component

Examples ##

Example - Basic

from hybrid import ui

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

    navs = [
        ["Favorites", "favorites"],
        ["Groups", "person"],
        ["Folder", "folder"]
    ]

    # Creates a BottomNavbar control
    bmn = ui.addBottomNavbar(main, navs, "", 1)

    # Add a callback handler for `onChange` event
    bmn.setOnChange(onChange)

def onChange(text, index):
    ui.showPopup(text)

Copy All Run

Example - Hide or show labels

class Main extends App
{
    onStart()
    {
        // Creates a layout with objects verticaly centered.
        this.main = ui.addLayout( "main", "Linear", "VCenter", 1, 1 )
        this.main.setChildMargins( 0.01, 0.01, 0.01, 0.01 )

        var navs = [
            [ "Favorites", "favorites" ],
            [ "Groups", "person" ],
            [ "Folder", "folder" ]
        ]

        // Creates a BottomNavbar control
        this.bmn = ui.addBottomNavbar(this.main, navs, "", 1)

        // Add a callback handler for `onChange` event
        this.bmn.setOnChange( this.onChange )

        // Button to show the labels
        this.btn = ui.addButton(this.main, "Show Labels")
        this.btn.setOnTouch( this.showLabels )

        // Button to hide the labels
        this.btn1 = ui.addButton(this.main, "Hide Labels")
        this.btn1.setOnTouch( this.hideLabels )
    }

    showLabels( )
    {
        this.bmn.showLabels()
    }

    hideLabels()
    {
        this.bmn.hideLabels()
    }

    onChange(text, index)
    {
        ui.showPopup( text )
    }
}

from hybrid import ui

def OnStart():
    global bmn
    # Creates a layout with objects vertically centered
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
    main.setChildMargins(0.01, 0.01, 0.01, 0.01)

    navs = [
        ["Favorites", "favorites"],
        ["Groups", "person"],
        ["Folder", "folder"]
    ]

    # Creates a BottomNavbar control
    bmn = ui.addBottomNavbar(main, navs, "", 1)

    # Add a callback handler for `onChange` event
    bmn.setOnChange(onChange)

    # Button to show the labels
    btn = ui.addButton(main, "Show Labels")
    btn.setOnTouch(showLabels)

    # Button to hide the labels
    btn1 = ui.addButton(main, "Hide Labels")
    btn1.setOnTouch(hideLabels)

def showLabels(event):
    bmn.showLabels()

def hideLabels(event):
    bmn.hideLabels()

def onChange(text, index):
    ui.showPopup(text)

Copy All Run

Example - Custom styles

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

        var navs = [
            [ "Favorites", "favorites" ],
            [ "Groups", "person" ],
            [ "Folder", "folder" ]
        ]

        // Creates a BottomNavbar control
        this.bmn = ui.addBottomNavbar(this.main, navs, "", 1)

        // Hide the labels when not active
        this.bmn.labels = false

        // Set the color of the text and icons
        this.bmn.textColor = "#673ab7"
        this.bmn.iconColor = "#673ab7"

        // Set the icon size
        this.bmn.iconSize = "2rem"
    }
}

from hybrid import ui

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

    navs = [
        ["Favorites", "favorites"],
        ["Groups", "person"],
        ["Folder", "folder"]
    ]

    # Creates a BottomNavbar control
    bmn = ui.addBottomNavbar(main, navs, "", 1)

    # Hide the labels when not active
    bmn.labels = False

    # Set the color of the text and icons
    bmn.textColor = "#673ab7"
    bmn.iconColor = "#673ab7"

    # Set the icon size
    bmn.iconSize = "2rem"

Copy All Run

Properties

The following properties are available on the BottomNavbar object:

absHeight → Number

absLeft → Number

absTop → Number

absWidth → Number

backColor → String

backImage → String

border → Number

borderColor → String

borderStyle → String

cornerRadius → Number

disabled → Boolean

el → Object

elStyle → String

fontFile → String

height → Number

iconColor → String

iconSize → Number

isVisible → Boolean

labels → Boolean

left → Number

list → List

margins → List

opacity → Number

options → String

padding → List

parent → Object

position → Object

rotation → Number

textColor → String

textSize → Number

top → Number

type → String

value → Number

visibility → String

width → Number

Methods

The following methods are available on the BottomNavbar object:

addItem( name, icon, index )

animate( anim, duration )

bringForward( zIndex )

clearSelection()

destroy()

getEnabled( index ) → Boolean

getEnabledByName( name ) → Boolean

getList() → List

getPosition( options ) → Object

gone()

hide()

hideLabels()

popItem()

removeItemByIndex( index )

removeItemByName( name )

selectItem( name )

selectItemByIndex( index )

sendBackward( zIndex )

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

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

setEnabled( index, value )

setEnabledByName( name, value )

setIcon( index, newIcon )

setItemByIndex( index, newName, newIcon )

setList( navs )

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

showLabels()

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

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

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

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

Number: The index in which to add the action.

Number: The time in milliseconds.

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

Number: The index of the navigation action.

Number: The index of the navigation action to be remove

Number: The index of the bottom navigation action to be selected

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 border radius.

Number: Top-Right border radius.

Number: Bottom-Right border radius.

Number: Bottom-Left border radius.

Number: The index of the navigation action to update

Number: The index to update

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.
Position: "Fixed"”, “ "Static"
Label: `Hidelabels`”

String: “The name of the navigation action”

String: “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: “The name of the bottom navigation action.”

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

String: “The name of the navigation action to be remove.”

String: “The name to be set to active”

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 of measurement. Values are `px` `rem` or `%`.”

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 layout where to add the BottomNavbar

Object: The position of the touch event.

List: An array whose elements are of the form `[ "Title", "Icon" ]`

List: The navigation actions array. See `navs` param above for format.

function( text , index )

function( text , index , pos )

function( name , value , pos )

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

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

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

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

bmn.addItem
Adds a navigation action

bmn.animate
Animate the component.

bmn.backColor
A hexadecimal color of the form #rrggbb

bmn.backImage
The path to your image file.

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

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

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

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

bmn.clearSelection
Clears the selected navigation action.

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

bmn.destroy
Destroy the component.

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

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

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

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

bmn.getEnabled
Get the enabled state of a navigation action.

bmn.getEnabledByName
Get the enabled state of the bottom navigation action by its name.

bmn.getList
Returns the navigation actions list.

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

bmn.gone
Destroy the component.

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

bmn.hide
Hide the component.

bmn.hideLabels
Hides the text label of the bottom navigation action.

bmn.iconColor
Sets or returns the icon color. You can pass color in a hexadecimal format or rgb format.

bmn.iconSize
Sets or returns the icon font-size. You can also pass string values such as 1.2rem or 18px.

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

bmn.labels
Sets or returns a boolean whether the labels are shown or hidden on active state.

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

bmn.list
Sets or returns the navigation actions array. See navs params above for format.

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

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

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

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

bmn.parent
Returns the parent layout control.

bmn.popItem
Removes the last navigation action. This will return the item being removed.

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

bmn.removeItemByIndex
Removes a navigation action by its given index.

bmn.removeItemByName
Removes a navigation action by its given name.

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

bmn.selectItem
Sets navigation action to active by its name. If you are providing a wrong name, no action will be active.

bmn.selectItemByIndex
Sets a botttom navigation action to active by its index

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

bmn.setBorder
Sets the border line for the component container.

bmn.setCornerRadius
Sets the corner radius of the component.

bmn.setEnabled
Enable or disable a bottom navigation action. If you want to disable the component, use the disable property instead.

bmn.setEnabledByName
Enabled or disable a bottom navigation action by its name.

bmn.setIcon
Updates the icon of the given index.

bmn.setItemByIndex
Updates a navigation action by its index.

bmn.setList
Sets the navigation actions list.

bmn.setMargins
Sets the margin of the component.

bmn.setOnChange
Sets a callback function to execute when bottom navbar value changes.

bmn.setOnContextMenu
Adds a callback function on right click.

bmn.setOnTouch
Adds a callback handler when the BottomNavbar item is touch.

bmn.setPadding
Sets the padding of the component's container.

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

bmn.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.

bmn.setSize
Sets the size of the component.

bmn.shiftItem
Removes the first navigation action. This will return the item being removed.

bmn.show
Show the component.

bmn.showLabels
Shows the text label of the bottom navigation action.

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

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

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

bmn.type
Returns the type of the control.

bmn.value
Sets or returns the current value of the BottomNavbar. This is the index of the corresponding selected action.

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

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