Lists

One of the most common ways of displaying content within a pane is to structure the content using a list. A list is a multi-line row that displays a set of available items, of which one or many can be selected.

A list can be used to add other items to the list or to delete items from the list (see the next page). Lists can also:

• Contain a variety of dividers for organizing the list in different sections (see webOS TouchPad Wireframe Stencils for details).

• Contain expandable and collapsible dividers.

A list row can contain a single, tappable item or multiple items, each of which processes a tap differently. In a simple list, the entire row is tappable. Tapping the item either selects the item (revealing further details in a new pane or view), or triggers an action, such as playing a song.

In more complex designs, each row can contain several different elements. For example, a list item could contain a thumbnail image that can be tapped to open a larger image inside a popup, or a button to trigger to show further details of an item. See the Photos & Videos app.

Please refer to the webOS TouchPad Wireframe Stencils for more details on different list and list divider examples.

Example

1. Pane header
2. Collapsible divider
3. Simple list item
4. Multi action list item
5. Pane footer

This list uses collapsible dividers to organize content. The user taps on the divider arrows to collapse ("Palm" divider) and expand ("Google" divider) content.

List items can contain a single tappable area; for example, see item 3. Tapping on this item shows the contents of the Inbox in the adjacent pane.

List items can contain multiple tap targets; for example, for item 4, tapping the star icon adds the list item to the Favorites category above.