# Titanium.UI.ButtonBar

An iOS button bar component.

Availability
10.0.0
0.8
9.2.0

# Overview

The button bar is a set of buttons joined into a single control. On iOS, you can set up the buttons with either a title or image, but not both. On Android, you can set up the buttons with a title, image, or both.

Use the Titanium.UI.createButtonBar method or <ButtonBar> Alloy element to create a button bar.

The Titanium.UI.iOS.TabbedBar control is a button bar where the last selected button mantains a pressed or selected state. The following discussion applies to both button bar and tabbed bar.

# Examples

# Simple 3 button button bar

const win = Ti.UI.createWindow();
const buttonBar = Titanium.UI.createButtonBar({
  labels:['One', 'Two', 'Three']
});
buttonBar.addEventListener('click', (e) => {
  console.log(`Clicked on button index: ${e.index}`);
});
win.add(buttonBar);
win.open();

# Alloy XML Markup

Previous example as an Alloy view.

<Alloy>
    <Window id="win">
        <ButtonBar id="buttonBar">
            <!-- The Labels tag sets the ButtonBar.labels property -->
            <Labels>
                <!-- Specify text with node text or the title attribute. -->
                <!-- Can also specify the enabled, image and width attributes. -->
                <Label>One</Label>
                <Label>Two</Label>
                <Label>Three</Label>
            </Labels>
        </ButtonBar>
    </Window>
</Alloy>

# Properties

# index DEPRECATED

Availability
10.0.0
0.8
9.2.0
index :Number

DEPRECATED SINCE 8.0.0

This property has been deprecated in Titanium SDK 8.0.0 as this property has no effect and will be removed in SDK 9.0.0.

Index of the currently selected button.


# labels

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

Array of labels for the button bar.

The labels can be specified either using an array of strings, in which case each string defines the title for a button, or using an array of simple dictionary objects, BarItemType, which can specify title, image, width and enabled state for each button.

In Alloy you specify the labels with a nested <Labels> element that contains one or more <Label> elements.

<Alloy>
    <ButtonBar>
        <Labels>
            <!-- Specify text with node text or "title" attribute. -->
            <Label>button 1</Label>
            <Label title="button 2"/>
            <!-- uses images and/or widths -->
            <Label width="40" image="/KS_nav_ui.png"/>
            <!-- set as disabled -->
            <Label enabled="false">disabled</Label>
            <!-- empty labels will print a warning (no properties) -->
            <!-- <Label/> -->
        </Labels>
    </ButtonBar>
</Alloy>

# selectedButtonColor

Availability
9.0.0
9.2.0
selectedButtonColor :String | Titanium.UI.Color

Color of selected button, as a color name or hex triplet.

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


# selectedTextColor

Availability
9.0.0
9.2.0
selectedTextColor :String | Titanium.UI.Color

Color of title of button when it is selected, as a color name or hex triplet.

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


# textColor

Availability
9.0.0
9.2.0
textColor :String | Titanium.UI.Color

Color of title of button, as a color name or hex triplet.

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

# Events

# click

Availability
10.0.0
0.9
9.2.0

Fired when a button is clicked.

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 clicked button.

bubbles Boolean

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

cancelBubble Boolean

Set to true to stop the event from bubbling.

source Object

Source object that fired the event.

type String

Name of the event fired.