Back

addStepper

JS Py
Hello World
Content:
- Properties
- Methods

Adds a Stepper to a given layout.

stp = ui.addStepper( parent, steps, options, width, height ) → Object: Stepper Component

A stepper can display a series of steps or information that a user can navigate forward or backward.

For Mobile option, an additional position options can be added Top, Static or Bottom and AutoSwipe to enable auto swiping.

To style step count text, pass Fraction, Dots or Progress options.

For vertical and mobile, you can add Layout type Linear or Absolute

Properties

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

absHeight
absLeft
absTop
absWidth
activeStep
backColor
backImage
border
borderColor
borderStyle
cornerRadius
disabled
elevation
fontFile
height
isVisible
left
margins
opacity
options
orientation
padding
parent
position
rotation
textColor
textSize
top
type
visibility
width

Example - Basic stepper

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

        // Initialize the steps array
        var steps = ["Step 1", "Step 2", "Step 3"]

        // Add a stepper component to the main layout
        this.stp = ui.addStepper(this.main, steps, "", 0.6)

        // Add back button control to the main layout
        this.btnBack = ui.addButton(this.main, "Back", "Raised,Primary")
        this.btnBack.setOnTouch( this.back )

        // Add next button control to the main layout
        this.btnNext = ui.addButton(this.main, "Next", "Raised,Primary")
        this.btnNext.setOnTouch( this.next )
    }

    next()
    {
        this.stp.nextStep()
    }

    back()
    {
        this.stp.previousStep()
    }
}
from hybrid import ui

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

    # Initialize the steps array
    steps = ["Step 1", "Step 2", "Step 3"]

    # Add a stepper component to the main layout
    stp = ui.addStepper(main, steps, "", 0.6)

    # Add back button control to the main layout
    btnBack = ui.addButton(main, "Back", "Raised,Primary")
    btnBack.setOnTouch(back)

    # Add next button control to the main layout
    btnNext = ui.addButton(main, "Next", "Raised,Primary")
    btnNext.setOnTouch(next)

def next(event):
    stp.nextStep()

def back(event):
    stp.previousStep()
Copy All       Run      

Example - Vertical stepper

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

        // Stepper titles
        var steps = ["Step 1", "Step 2", "Step 3"]

        // Add a stepper control into the main layout
        this.stp = ui.addStepper(this.main, steps, "Vertical", 0.5, 0.6)

        // Get the layout of the first step
        var step1Lay = this.stp.getLayout( 0 )
        step1Lay.setChildMargins(0, 0.005, 0, 0.005)

            // Add controls to the first step layout
            ui.addText(step1Lay, "This is a text content on step 1")
            var btnStep1Next = ui.addButton(step1Lay, "Next", "Raised,Primary")
            btnStep1Next.setOnTouch( this.next )

        // Get the layout of the second step
        var step2Lay = this.stp.getLayout( 1 )
        step2Lay.setChildMargins(0, 0.005, 0, 0.005)

            // Add controls to the second step layout
            ui.addText(step2Lay, "This is a text content on step 2")
            var btnStep2Next = ui.addButton(step2Lay, "Next", "Raised,Primary")
            btnStep2Next.setOnTouch( this.next )

        // Get the layout of the third step
        var step3Lay = this.stp.getLayout( 2 )
        step3Lay.setChildMargins(0, 0.005, 0, 0.005)

            // Add controls to the third step layout
            ui.addText(step3Lay, "This is a text content on step 3")
            var btnStep3Next = ui.addButton(step3Lay, "Next", "Raised,Primary")
            btnStep3Next.setOnTouch( this.next )
    }

    next()
    {
        this.stp.nextStep()
    }

    back()
    {
        this.stp.previousStep()
    }
}
from hybrid import ui

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

    # Stepper titles
    steps = ["Step 1", "Step 2", "Step 3"]

    # Add a stepper control into the main layout
    stp = ui.addStepper(main, steps, "Vertical", 0.5, 0.6)

    # Get the layout of the first step
    step1Lay = stp.getLayout(0)
    step1Lay.setChildMargins(0, 0.005, 0, 0.005)

    # Add controls to the first step layout
    ui.addText(step1Lay, "This is a text content on step 1")
    btnStep1Next = ui.addButton(step1Lay, "Next", "Raised,Primary")
    btnStep1Next.setOnTouch(next)

    # Get the layout of the second step
    step2Lay = stp.getLayout(1)
    step2Lay.setChildMargins(0, 0.005, 0, 0.005)

    # Add controls to the second step layout
    ui.addText(step2Lay, "This is a text content on step 2")
    btnStep2Next = ui.addButton(step2Lay, "Next", "Raised,Primary")
    btnStep2Next.setOnTouch(next)

    # Get the layout of the third step
    step3Lay = stp.getLayout(2)
    step3Lay.setChildMargins(0, 0.005, 0, 0.005)

    # Add controls to the third step layout
    ui.addText(step3Lay, "This is a text content on step 3")
    btnStep3Next = ui.addButton(step3Lay, "Next", "Raised,Primary")
    btnStep3Next.setOnTouch(next)

def next(event):
    stp.nextStep()

def back():
    stp.previousStep()
Copy All       Run      

Example - Mobile Stepper

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

        var steps = ["Step 1", "Step 2", "Step 3"]

        var img1 = "https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60"
        var img2 = "https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60"
        var img3 = "https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80"

        // Add stepper control with `mobile` option
        this.stp = ui.addStepper(this.main, steps, "mobile", 0.6, 0.7)

        // get the first layout on the stepper
        this.lay1 = this.stp.getLayout( 0 )

            // add an image control to the first layout
            ui.addImage(this.lay1, img1, "", 1, 1)

        // get the second layout on the stepper
        this.lay2 = this.stp.getLayout( 1 )

            // add an image control to the second layout
            ui.addImage(this.lay2, img2, "", 1, 1)

        // get the third layout on the stepper
        this.lay3 = this.stp.getLayout( 2 )

            // add an image control to the third layout
            ui.addImage(this.lay3, img3, "", 1, 1)

        // Add a callback handler when stepper layout changes
        this.stp.setOnChange( this.onChange )
    }

    onChange( index )
    {
        ui.showPopup( "Layout index " + index )
    }
}
from hybrid import ui

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

    steps = ["Step 1", "Step 2", "Step 3"]

    img1 = "https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60"
    img2 = "https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60"
    img3 = "https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80"

    # Add stepper control with `mobile` option
    stp = ui.addStepper(main, steps, "mobile", 0.6, 0.7)

    # get the first layout on the stepper
    lay1 = stp.getLayout(0)

    # add an image control to the first layout
    ui.addImage(lay1, img1, "", 1, 1)

    # get the second layout on the stepper
    lay2 = stp.getLayout(1)

    # add an image control to the second layout
    ui.addImage(lay2, img2, "", 1, 1)

    # get the third layout on the stepper
    lay3 = stp.getLayout(2)

    # add an image control to the third layout
    ui.addImage(lay3, img3, "", 1, 1)

    # Add a callback handler when stepper layout changes
    stp.setOnChange(onChange)

def onChange(index):
    ui.showPopup("Layout index " + str(index))
Copy All       Run      

Example - Autoswipe and Fraction Mobile Stepper

class Main extends App
{
    onStart()
    {
        ui.setTheme("dark")

        // Creates a layout with objects verticaly centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        var steps = ["Step 1", "Step 2", "Step 3"]

        var img1 = "https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60"
        var img2 = "https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60"
        var img3 = "https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80"

        // Add stepper control with `mobile` option
        this.stp = ui.addStepper(this.main, steps, "mobile,autoswipe,fraction", 0.6)

        // Get the first layout on the stepper
        this.lay1 = this.stp.getLayout( 0 )

            // Add an image control to the first layout
            ui.addImage(this.lay1, img1, "", 1)

        // Get the second layout on the stepper
        this.lay2 = this.stp.getLayout( 1 )

            // Add an image control to the second layout
            ui.addImage(this.lay2, img2, "", 1)

        // Get the third layout on the stepper
        this.lay3 = this.stp.getLayout( 2 )

            // Add an image control to the third layout
            ui.addImage(this.lay3, img3, "", 1)

        // Add a callback handler when stepper layout changes
        this.stp.setOnChange( this.onChange )
    }

    onChange( index )
    {
        ui.showPopup( "Layout index " + index )
    }
}
from hybrid import ui

def OnStart():
    ui.setTheme("dark")

    # Creates a layout with objects verticaly centered
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    steps = ["Step 1", "Step 2", "Step 3"]

    img1 = "https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60"
    img2 = "https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60"
    img3 = "https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80"

    # Add stepper control with `mobile` option
    stp = ui.addStepper(main, steps, "mobile,autoswipe,fraction", 0.6)

    # Get the first layout on the stepper
    lay1 = stp.getLayout(0)

    # Add an image control to the first layout
    ui.addImage(lay1, img1, "", 1)

    # Get the second layout on the stepper
    lay2 = stp.getLayout(1)

    # Add an image control to the second layout
    ui.addImage(lay2, img2, "", 1)

    # Get the third layout on the stepper
    lay3
Copy All       Run      

Methods

The following methods are available on the Stepper object:

animate( anim, duration )
bringForward( zIndex )
destroy()
getLayout( index ) → Object: Layout
getLayoutIndex( layout ) → Number
getPosition( options ) → Object
gone()
hide()
nextStep()
previousStep()
removeStep( index )
sendBackward( zIndex )
setBorder( width, clr, style )
setCornerRadius( tl, tr, bl, br, mode )
setMargins( left, top, right, bottom, mode )
setOnChange( callback )
setOnComplete( callback )
setOnContextMenu( callback )
setOnTouch( callback )
setPadding( left, top, right, bottom, mode )
setPosition( left, top, mode )
setScale( x, y )
setSize( width, height )
setTitleText( index, title )
show()
Boolean: Sets or returns the disabled state of the control.
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 index of the corresponing stepper layout
Number: The index of the step to remove.
Number: The z-index. A positve value behaves like `bringForward` method.
Number: Border-left thickness in pixels.
Number: Top-Left border radius in pixels.
Number: Top-Right border radius in pixels.
Number: Bottom-Left border radius in pixels.
Number: Bottom-Right border radius in pixels.
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: The index of the Stepper.
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 active step.
Number: Sets or returns the border thickness in pixels.
Number: Sets or returns the corner radius in pixels.
Number: Sets or returns the elevation of the mobile stepper. 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 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: “A comma separated Stepper options. Values can be `Vertical` `Horizontal` `Loop` `Mobile` or `AlternativeLabel`.”
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: “The new title text.”
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 relative path to the font-family use.
String: Sets or returns the options of the control.
String: Sets or returns the orientation of the Stepper. Values can be Horizontal or Vertical.
String: Sets or returns the color of the text.
String: Returns the type of the control.
String: Sets or returns the visibility of the control.
Object: The parent layout of the Stepper
Object: The layout to check.
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: An array of titles.
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()
function( event )
function( event )
stp.animate
Animate the component
stp.bringForward
Bring this component forward by a given z-index
stp.destroy
Destroy the component
stp.getLayout
Returns the layout of the corresponding step layout where you can add controls
stp.getLayoutIndex
Get the index of the corresponding layout
stp.getPosition
Returns the position of the component. The return object is of the form `{ left, top, right, bottom
stp.gone
Destroy the component
stp.hide
Hide the component
stp.nextStep
Go to the next step
stp.previousStep
Go to the previous step
stp.removeStep
Removes a corresponding step by its index
stp.sendBackward
Bring this component backward by a given z-index
stp.setBorder
Sets the border line for the component container
stp.setCornerRadius
Sets the corner radius of the component
stp.setMargins
Sets the margin of the component
stp.setOnChange
Adds a callback function to be called when the stepper has changed step
stp.setOnComplete
Adds a callback function to be called when the stepper is complete
stp.setOnContextMenu
Adds a callback function on right click
stp.setOnTouch
Adds a callback handler when the component is touch
stp.setPadding
Sets the padding component container
stp.setPosition
Sets the position of the component relative to its parent dimensions
stp.setScale
Sets the x and y scaling of the component
stp.setSize
Sets the size of the component
stp.setTitleText
Sets a new title for the corresponding step by its index
stp.show
Show the component