Titanium Mobile

# Titanium.UI.iOS.Stepper

A widget used to increment and decrement a value.

Availability
5.4.0
9.2.0
Extends
Titanium.UI.View

# Overview

Default Custom
Stepper Custom

A Stepper displays its selected state while it is being pressed. You can specify background images for each state on iOS. Use the Titanium.UI.iOS.createStepper method or a <Stepper> Alloy element to create a stepper (see the "Examples" section details).

  • When assigning a custom image to the backgroundImage property, the image must be partially or wholly transparent for the background color or background gradient to be visible.

  • Similarly, for an assigned background gradient to show through, the backgroundColor may need to be set to 'transparent'.

  • Note that the stepper cannot be re-sized.

# Examples

# Simple Stepper Example

var win = Ti.UI.createWindow({
    backgroundColor: '#fff'
});

var stepper = Ti.UI.iOS.createStepper({
    tintColor: "green",
    steps: 3,
    maximum: 30,
    minimum: 0
});

stepper.addEventListener("change", function(e) {
    Ti.API.info(e.value);
});

win.add(stepper);
win.open();

# Alloy XML Markup

Previous example as an Alloy view.

stepper.xml:

<Alloy>
    <Window id="window">
        <Stepper id="stepper" onClick="doClick" tintColor="green" steps="3" />
    </Window>
</Alloy>

stepper.js:

function doClick(e) {
    alert(e.value);
}

$.window.open();

# Properties

# autorepeat

Availability
5.4.0
9.2.0
autorepeat :Boolean

If YES, the user pressing and holding on the stepper repeatedly alters value. The default value is YES.

# backgroundImage

Availability
5.4.0
9.2.0
backgroundImage :String

Background image for the stepper in its normal state, specified as a local file path or URL.

Also sets the background image for other stepper states (focused, selected), unless they've been specified explicitly. On iOS, if backgroundDisabledImage is unset, the image will appear faded to indicate being disabled. Also on iOS, if backgroundSelectedImage is unset, the image will be darkened to indicate being selected.

# continuous

Availability
5.4.0
9.2.0
continuous :Boolean

If YES, value change events are sent immediately when the value changes during user interaction. If NO, a value change event is sent when user interaction ends. The default value is YES.

# decrementDisabledImage

Availability
5.4.0
9.2.0
decrementDisabledImage :String

Background image for the stepper decrement button in its disabled state, specified as a local file path or URL. The decrement button enters a disabled state ones the value is equal to the minimumValue , setting the enabled property to false will have no effect to decrement button state.

# decrementImage

Availability
5.4.0
9.2.0
decrementImage :String

Background image for the stepper decrement button in its normal state, specified as a local file path or URL.

Also sets the background image for the other stepper states (disabled, focused, selected), unless they've been specified explicitly, except for iOS, which requires a backgroundImage.

# enabled

Availability
5.4.0
9.2.0
enabled :Boolean

Determines if the stepper is enabled or disabled.

# incrementDisabledImage

Availability
5.4.0
9.2.0
incrementDisabledImage :String

Background image for the stepper increment button in its disabled state, specified as a local file path or URL.The increment button enters a disabled state ones the value is equal to the maximumValue , setting the enabled property to false will have no effect to increment button state.

# incrementImage

Availability
5.4.0
9.2.0
incrementImage :String

Background image for the stepper increment button in its normal state, specified as a local file path or URL.

Also sets the background image for the other stepper states (disabled, focused, selected), unless they've been specified explicitly, except for iOS, which requires a backgroundImage.

# maximum

Availability
5.4.0
9.2.0
maximum :Number

The maximum value the stepper will be set to, the value must be greater than the minimum value. If you attempt to set a value equal to or lower than minimum, the system will default the value to 100.

# minimum

Availability
5.4.0
9.2.0
minimum :Number

The minimum value the stepper will be set to, the value must be smaller than the maximum value. If you attempt to set a value equal to or greater than maximum, the system will default the value to 0.

# steps

Availability
5.4.0
9.2.0
steps :Number

The value the stepper will increment and decrement by, default value for this property is 1. When setting a new value, it must be greater than 1.

# tintColor

Availability
5.4.0
9.2.0
tintColor :String | Titanium.UI.Color

Sets the color for the widget, any backgroundImages added will be set to the same color.

For information about color values, see the "Colors" section of Titanium.UI.

Default: null

# value

Availability
5.4.0
9.2.0
value :Number

The current value of the stepper.

# wraps

Availability
5.4.0
9.2.0
wraps :Boolean

If YES, incrementing beyond maximum sets value to minimum. likewise, decrementing below minimum sets value to maximum. If NO, the stepper does not increment beyond maximum nor does it decrement below minimum but rather holds at those values. The default value is NO.

# Events

# change

Availability
5.4.0
9.2.0

Fired every time the stepper value changes.

Properties

Name Type Description
value Number

The current value of the stepper.

minimum Number

The minimum value of the stepper.

maximum Number

The maximum value of the stepper.

source Object

Source object that fired the event.

type String

Name of the event fired.

bubbles Boolean

True if the event will try to bubble up if possible.

cancelBubble Boolean

Set to true to stop the event from bubbling.

Contents