Skip to content
This repository has been archived by the owner on Oct 9, 2018. It is now read-only.

Action Bar

Jump to bottom
tneil edited this page May 4, 2012 · 29 revisions

The BlackBerry 10 action bar allows for a combination of buttons and tabs. Action Bars are currently only supported on PlayBook and BB10 devices. It is essentially a toolbar that appears at the bottom of the screen allowing for scrolling content above it.

Action Bar

If you have a title bar with a back button specified for PlayBook, and an action bar is not already specified for your screen, an action bar will be created with a back button as long as you don't already have an action bar defined with tabs. Action bars allow you to both navigate back to the previous screen but also provide tabs and/or buttons for your user.

NOTE: Combining a back button and tabs on an action bar is not allowed

If you provide a data-bb-back-caption attribute on the action bar, a back button will automatically be created. If you are using tabs on your screen, you can specify their tab styles using the data-bb-tab-style attribute. Currently only "highlight" is supported. Each item on the bar is defined as a data-bb-type="action" and its type is defined by the data-bb-style attribute which can either be a "tab" or a "button". Tabs automatically handle the highlighting of the selected tab. it is recommended that you group your tabs and buttons together to provide a clean user interface.

You can handle the selection of the action by assigning an onclick event handler.

The color style of the action bar is either a dark or light theme. This is applied using the bb10ActionBarDark property in the bb.int() function. Simply set bb10ActionBarDark to true/false to have the dark or light theme. This theme will be carried over for the entire application to ensure a consistent look and feel.

<div data-bb-type="action-bar" data-bb-tab-style="highlight">
	<div data-bb-type="action" data-bb-style="tab" data-bb-img="images/actionBar/cog_dark_theme.png">Library</div>
	<div data-bb-type="action" data-bb-style="tab" data-bb-selected="true" data-bb-img="images/actionBar/cog_dark_theme.png">Smart</div>
	<div data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="alert('Find');">Find</div>
</div>

Action Item Image Sizes

Images used for Actions will be scaled to the following resolutions and centered on the action bar items.

  • BlackBerry PlayBook - 40 x 40 pixels
  • BlackBerry 10 - 80 x 80 pixels

Action Overflow Menu

If there are more than 5 total actions that are added to the action bar (including the back button) an overflow action menu will be created on the far right of the action bar. This button will trigger a slide in overflow menu that will contain the remaining items that were defined on the action bar.

Clone this wiki locally