Titanium Mobile # Titanium.UI.ButtonBar
An iOS button bar component.
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
10.0.0 0.8 9.2.0DEPRECATED 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
10.0.0 0.8 9.2.0Array 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
9.0.0 9.2.0Color of selected button, as a color name or hex triplet.
For information about color values, see the "Colors" section of Titanium.UI.
# selectedTextColor
9.0.0 9.2.0Color 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
9.0.0 9.2.0Color 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
10.0.0 0.9 9.2.0Fired 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. |
| 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. |