Titanium Mobile

# Titanium.UI.OptionBar

A bar of selectable buttons where only 1 can be selected at a time.

Availability
10.0.0
10.0.0
10.0.0
Extends
Titanium.UI.View

# Overview

This is a view which shows a list of options where only 1 option is selectable by the user.

On iOS, this displays a segmented control (opens new window).

On Android, this displays a toggle button group (opens new window).

Use the Titanium.UI.createOptionBar method to create a Option Bar.

# Examples

# Text-Only Buttons

Creates an option bar of text buttons.

const win = Ti.UI.createWindow();
const optionBar = Ti.UI.createOptionBar({
  labels: [ 'Option 1', 'Option 2', Option 3 ]
});
optionBar.addEventListener('click', (e) => {
  Ti.API.info(`Option ${e.index} was selected.`);
});
win.add(optionBar);
win.open();

# Image-Only Buttons

Creates an option bar of image-only buttons.

const win = Ti.UI.createWindow();
const optionBar = Ti.UI.createOptionBar({
  labels: [
    { image: '/Option1.png' },
    { image: '/Option2.png' },
    { image: '/Option3.png' },
  ]
});
optionBar.addEventListener('click', (e) => {
  Ti.API.info(`Option ${e.index} was selected.`);
});
win.add(optionBar);
win.open();

# Buttons with Text and Images

Creates an option bar where each button shows an image to the left of its text. This is only supported on Android. On iOS, if you set the image property, then the title property is ignored.

const win = Ti.UI.createWindow();
const optionBar = Ti.UI.createOptionBar({
  labels: [
    { image: '/Option1.png', title: 'Option 1' },
    { image: '/Option2.png', title: 'Option 2' },
    { image: '/Option3.png', title: 'Option 3' },
  ]
});
optionBar.addEventListener('click', (e) => {
  Ti.API.info(`Option ${e.index} was selected.`);
});
win.add(optionBar);
win.open();

# Properties

# index

Availability
10.0.0
10.0.0
10.0.0
index :Number

Index of the currently selected option.

# labels CREATION ONLY

Availability
10.0.0
10.0.0
10.0.0
labels :Array<String> | Array<BarItemType>

Array of labels for the option bar.

Setting this to an array of strings specifies the title of each option in the bar.

Alternatively, this can be set to an array of dictionary objects of type BarItemType which allows you to specify a title and/or image for each option in the bar. Only Android supports setting both title and image properties on the same item. On iOS, if you set the image property, then the title property is ignored.

# layout CREATION ONLY

Availability
10.0.0
10.0.0
10.0.0
layout :String

Specifies the layout direction such as 'horizontal' or 'vertical'.

This property is only supported on Android and allows you to display its toggle buttons in ther 'vertical' direction.

Default: horizontal

# Events

# click

Availability
10.0.0
10.0.0
10.0.0

Fired when an option has been selected.

There is a subtle difference between singletap and click events.

A singletap event is generated when the user taps the screen briefly without moving their finger. This gesture will also generate a click event.

However, a click event can also be generated when the user touches, moves their finger, and then removes it from the screen.

On Android, a click event can also be generated by a trackball click.

Properties

Name Type Description
index Number

Index of the option clicked on.

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