Card styles

When an application imports a card, the BlackBerry 10 OS controls the visual transition on and off the screen, but it also controls the peek behavior that allows the user to look at the card under the card that's currently displayed. The BlackBerry 10 OS manages the transition and the peek behavior based on the card's style.

Composers, pickers, and previewers

You can use three different styles of card in your application: composers for creating and editing content, pickers for choosing existing content, and previewers for viewing existing content. The style of card you use determines how the BlackBerry 10 OS transitions between the application and the card, how peeking is handled, and determines the general task that a card performs. Each card style has associated visual style guidelines.

Picker

Composer

Previewer

Examples of a picker, composer, and previewer

Card transitions

A card transitions on or off the screen in a beautiful animation. The cards appears on the screen as either sliding in from the bottom or from the right side. Previewers slide in from the right side, while composers and pickers slide in from the bottom of the screen.

Transition style of composers and pickers

Transition style of composers and pickers

Transition style of previewers

Transition style of previewers

Peeking

Peeking is the ability for a user to see under a card, by using a gesture. There are two ways in which a user can peek under the card:

  • Parent peek: The user slides a finger right to reveal the screen that lies immediately under the card.

  • Root peek: The user slides a finger right on the action bar to reveal the application at the bottom of the stack of cards.

Parent peek

Root peek

Parent and root peek

Not all card styles support both peek types. Composer and picker cards support only parent peek, and previewer cards support both types.

UI consideration for cards

To verify a great user experience, here are some guidelines to consider if you want to use cards in your app:

Description Composer Previewer Pickers
Button(s) in the title bar of the screen Yes No Yes
Action bar at the bottom of the screen No Yes Yes
Supports context menu Yes Yes No

To learn what the action bar, context menu, and buttons are, see the basics.

When you create a card, you must add support for both landscape and portrait orientation so that the card follows the orientation of your application.

comments powered by Disqus