-
Notifications
You must be signed in to change notification settings - Fork 192
Data Attribute Reference
The bbUI framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of controls. To avoid naming conflicts with other plugins or frameworks that also use data- attributes the bbUI controls use a data-bb- prefix.
Divs with data-bb-type="action-bar" are styled to look like BlackBerry 10 action bars
| data-bb-tab-style | highlight NOTE: This attribute has been removed in the "next" branch for v0.9.3 |
Action divs must be nested inside an action bar and use the data-bb-type="action" attribute
| data-bb-tab-style | action | tab |
| data-bb-img | Path to image to be used in the action item |
| data-bb-overflow | false | true NOTE: true is only supported in the "next" branch for v0.9.3 |
| data-bb-pin | false | true NOTE: true is only supported in the "next" branch for v0.9.3 and is only supported for button actions |
The text used as the innerHTML of the action <div> will be used as the caption for the tab/button.
NOTE: Activity indicators are only supported in the "next" branch for v0.9.3
To create an activity indicator use the data-bb-type="activity-indicator" attribute.
| data-bb-size | small | medium | large |
NOTE: This will be removed in v0.9.3 and is currently removed from the "next" branch. Its functionality has been merged into the Image List control
Divs with data-bb-type="text-arrow-list" are styled to be a list of items with arrows to their right. Can contain one or many arrow list items.
NOTE: This will be removed in v0.9.3 and is currently removed from the "next" branch. Its functionality has been merged into the Image List control
Arrow list items are contained in an arrow list. Items are defined with an data-bb-type="item" attribute. The innerHTML of the item <div> is used as the caption of the list item.
Divs with data-bb-typ="bbm-bubble" will be styled to look like a bubble in the BBM app. A BBM bubble can contain one or more items.
| data-bb-style | right | left |
A BBM bubble conversation item must be contained in a BBM bubble and has the data-bb-type="item" attribute.
| data-bb-img | Path to image to be used for the item |
The innerHTML of the item <div> is used as the text to show in the conversation item.
Divs with data-bb-type="button" are styled to be BlackBerry looking buttons
| data-bb-disabled | false | true |
| data-bb-img | Path to image to be used for the button NOTE: This is only supported in the "next" branch for v0.9.3 |
Divs with the data-bb-type="context-menu" will be styled as a BlackBerry 10 press-and-hold context menu. A context menu contains one or more actions
Context menu actions are contained in a context menu <div> and have the data-bb-type="action" attribute
| data-bb-img | Path to image to be used for the action |
| data-bb-pin | false | true NOTE: true is only supported in the "next" branch for v0.9.3 |
The innerHTML of the action <div> is used as the text to show in the menu item.
Dropdowns are created by simply adding a <select> element to the screen
| data-bb-label | Optional label text for a BlackBerry 10 Dropdown |
| data-bb-style | stretch |
Divs with the data-bb-type="round-panel" are styled as a control group
Control group headers are contained in a control group and have the data-bb-type="panel-header" attribute
Inputs of type="file" are styled in BlackBerry 10 to appear as a standard BlackBerry 10 button. You can customize the caption of the file input button using the following attribute
| data-bb-caption | Caption of File button NOTE: This attribute is only available in the "next" branch for v0.9.3 |
Divs with data-bb-type="grid-layout" are styled to be a BlackBerry 10 image grid
| data-bb-style | landscape | square |
| data-bb-context | false | true |
| data-bb-header-justify | center | left | right |
| data-bb-header-style | default | solid |
A grid list group must be contained in a grid list control and has the data-bb-type="group" attribute. A group can contain one or more rows.
| data-bb-title | Optional text to use as a caption in the group heading |
A grid list row must be contained in a grid list group and has the data-bb-type="row" attribute. A row contains one or more items
A grid list item must be contained in a grid list row and has the data-bb-type="item" attribute.
| data-bb-img | Path of image to display |
| data-bb-title | Title text to display on image |
Sub-title text for the image is contained as the innerHTML of the <div>
Divs that use the data-bb-type="image-list" attribute will be styled as a BlackBerry image list
| data-bb-context | false | true |
| data-bb-images | display | none |
| data-bb-image-placeholder | Path of image to display |
| data-bb-image-effect | none | fade |
| data-bb-header-justify | center | left | right |
| data-bb-header-style | default | solid NOTE: solid is only supported for BlackBerry 10 |
| data-bb-style | default | arrowlist | arrowbuttons | addbuttons | removebuttons NOTE: BB5/6/7 only supports default and arrowlist. This functionality is currently in the "next" branch targeted for v0.9.3 |
A header divider <div> is with the data-bb-type="header" is used to separate items in an image list. The contents of the header innerHTML is used as the display caption.
Divs with the attribute data-bb-type="label-control-container" are styled as a control container for BlackBerry
Rows are created in the Label Control container by using divs with the data-bb-type="row" attribute.
Labels are used for a row by specifying a div with the data-bb-type="label" attribute.
Divs that use the data-bb-type="menu" attribute will be styled as a menu. Menus contain one or more menu items or separators
Menu items contained in a Menu use the data-bb-type="menu-item" attribute
| data-bb-img | Path to image to be used for the item |
| data-bb-selected | false | true |
Menu separators contained in a Menu use the data-bb-type="menu-separator" attribute
Divs that use the data-bb-type="pill-buttons" will be styled as a BlackBerry pill button group. This group can contain one or more buttons.
Buttons in a pill button group have the data-bb-type="pill-button" attribute
| data-bb-selected | false | true |
The innerHTML of the button <div> contains the caption of the button.
Divs with data-bb-type="screen" are styled to be a BlackBerry screen
| data-bb-effect |
none | fade | slide-left | slide-right | slide-up | slide-down NOTE: fade is the only transition supported in 0.9.2. All the rest are only supported in the "next" branch for v0.9.3 |
Title bar divs must be nested inside a screen div and use the data-bb-type="title" attribute.
| data-bb-caption | Caption to show in the title area |
| data-bb-back-caption | Caption to show in the "back" button on PlayBook and BB10 |